অনুভূমিক রেখা এবং html, CSS এ কোড করার সঠিক উপায়

122

কিছু ব্লকের পরে আমাকে একটি অনুভূমিক রেখা আঁকতে হবে এবং এটি করার জন্য আমার তিনটি উপায় রয়েছে:

1) একটি শ্রেণীর সংজ্ঞা দিন h_lineএবং এতে সিএসএস বৈশিষ্ট্য যুক্ত করুন, পছন্দ করুন

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) hrট্যাগ ব্যবহার করুন

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) এটি একটি afterসিউডোক্লাসের মতো ব্যবহার করুন

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

সবচেয়ে কার্যকর কোন উপায়ে?

html css

— Тявин Тявин
সূত্র

2

আমি মনে করি <hr>এটিই সবচেয়ে অর্থপূর্ণ। মানে, এর অর্থ কি তাই না?

— j08691

3

কেন ব্যবহার border-bottomকরবেন না ?

— jsweazy

3

এইচটিএমএল 5 এ এইচটিএমএল <hr> উপাদান অনুচ্ছেদের স্তরের উপাদানগুলির মধ্যে একটি থিম্যাটিক বিরতি উপস্থাপন করে (উদাহরণস্বরূপ, একটি গল্পে দৃশ্যের পরিবর্তন, বা বিভাগের সাথে বিষয়বস্তু স্থানান্তর)।

— স্কট সিম্পসন

138

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

স্নিপেট প্রসারিত করুন

এখানে এইচটিএমএল 5 বয়লারপ্লিট এটি করে:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

— moettinger
সূত্র

3

দ্রষ্টব্য:margin: 1em auto আপনি যদি সর্বদা পৃষ্ঠার কেন্দ্রে থাকতে চান তবে ব্যবহার করুন ।

— জ্যাক মারাইস

1

@ জাক্কেসমারাইস, নিশ্চিত নন যে এটি প্রয়োজনীয় কারণ এটি কোনও ব্লক উপাদান যার কোনও সংজ্ঞায়িত প্রস্থ নেই সুতরাং এটি কোনওভাবেই পুরো ধারকটির প্রস্থকে বিস্তৃত করতে পারে।

— moettinger

65

আমি সিমেন্টিক মার্কআপে যাব, একটি ব্যবহার করতাম <hr/>।

আপনি যা চান এটি কেবল সীমানা না থাকলে আপনি পছন্দসই সীমাটি পেতে প্যাডিং, সীমানা এবং মার্জিনের সংমিশ্রণটি ব্যবহার করতে পারেন।

— bevacqua
সূত্র

8

<hr>বৈধ এইচটিএমএল 5। এটি একটি অনুভূমিক নিয়মের প্রতিনিধিত্ব করে, তবে এখন বিষয়বস্তুর মধ্যে থিম্যাটিক বিরতি হিসাবে শব্দার্থক পদে সংজ্ঞায়িত হয়েছে। অন্য কোনও কিছু না বললে বেশিরভাগ ব্রাউজারগুলি এটি এখনও একটি অনুভূমিক রেখা হিসাবে প্রদর্শন করবে। সূত্র: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

শিরোনাম বলছে অনুভূমিক রেখা এবং <ঘন্টা /> এটি তাই আমি এটি আপ। শিরোনামে স্টাইলযুক্ত অনুভূমিক রেখাটি পড়া উচিত ছিল।

— রায়ান বায়েন

11

এইচটিএমএল 5-এ <hr>ট্যাগটি থিম্যাটিক ব্রেকটি সংজ্ঞায়িত করে। এইচটিএমএল 4.01 এ, <hr>ট্যাগটি একটি অনুভূমিক বিধি উপস্থাপন করে।

http://www.w3schools.com/tags/tag_hr.asp

সুতরাং সংজ্ঞা পরে, আমি পছন্দ করব <hr>

— bpoiss
সূত্র

10

আপনি যদি সত্যিই একটি থিম্যাটিক ব্রেক চান তবে যে কোনও উপায়ে <hr>ট্যাগটি ব্যবহার করুন ।

আপনি যদি কেবল ডিজাইনের লাইন চান তবে আপনি CSS শ্রেণীর মতো কিছু ব্যবহার করতে পারেন

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

এবং এটি পছন্দ করুন

<div class="block_1 hline-bottom">Cheese</div>

— serv-Inc
সূত্র

5

আমি লাইনের মতো দীর্ঘ ড্যাশ চাইছিলাম, তাই আমি এটি ব্যবহার করেছি।

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

স্নিপেট প্রসারিত করুন

— আলিয়া
সূত্র

5

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

স্নিপেট প্রসারিত করুন

— নাদিম কাসমি
সূত্র

"কোনটি সবচেয়ে বেশি ব্যবহারিক?" প্রশ্নের উত্তর আপনি দেননি?

— ব্রায়ান টম্পসেট - :33

1

আমার সহজ সমাধানটি হল শূন্য শীর্ষ এবং নীচে মার্জিন, শূন্য সীমানা, 1 পিক্সেল উচ্চতা এবং বিপরীত পটভূমির রঙের সাথে CSS এর সাথে স্টাইল করা। এটি স্টাইলটি সরাসরি সেট করে বা কোনও শ্রেণীর সংজ্ঞা দিয়ে করা যেতে পারে, উদাহরণস্বরূপ:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

— FredG
সূত্র

1

এটি প্রয়োজনীয়তার উপর নির্ভর করে তবে অনেকগুলি বিকাশকারীদের পরামর্শটি আপনার কোডটি যথাসম্ভব সহজ করে তোলা । সুতরাং, তার জন্য সহজ "এইচআর" ট্যাগ এবং সিএসএস কোড সহ যান।

— রাম প্রসাদ
সূত্র

0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

স্নিপেট প্রসারিত করুন

জোর দেওয়া পাঠ্য

— Bruh
সূত্র

আপনার উত্তর ব্যাখ্যা করে একটি মন্তব্য যুক্ত করুন।

— বারথি

0

এটি তুলনামূলকভাবে সহজ উদাহরণ এবং আমার জন্য কাজ করেছে।

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

সংস্থান: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html