क्षैतिज रेखा और इसे 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

HTML5 में HTML <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>

स्निपेट का विस्तार करें

यहाँ HTML5boilerplate कैसे है:

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

— moettinger
स्रोत

3

नोट:margin: 1em auto यदि आप इसे हमेशा पृष्ठ के केंद्र में रखना चाहते हैं तो उपयोग करें ।

— जैक्स मरैस

1

@JacquesMarais, यह सुनिश्चित करना आवश्यक नहीं है क्योंकि यह एक ब्लॉक तत्व है जिसमें कोई परिभाषित चौड़ाई नहीं है, इसलिए यह पूरे कंटेनर की चौड़ाई को वैसे भी फैला देगा।

— 19

65

मैं सिमेंटिक मार्कअप के लिए जाऊँगा, a का उपयोग करूँगा <hr/>।

जब तक यह सिर्फ एक सीमा नहीं है कि आप क्या चाहते हैं, तब आप इच्छित सीमा प्राप्त करने के लिए पैडिंग, बॉर्डर और मार्जिन के संयोजन का उपयोग कर सकते हैं।

— bevacqua
स्रोत

8

<hr>मान्य HTML5 है। यह एक क्षैतिज नियम का प्रतिनिधित्व करता था, लेकिन अब इसे सामग्री के बीच एक विषयगत विराम के रूप में अर्थ शब्दों में परिभाषित किया गया है। अधिकांश ब्राउज़र अभी भी इसे एक क्षैतिज रेखा के रूप में प्रदर्शित करेंगे जब तक कि अन्यथा न बताया जाए। स्रोत: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell

शीर्षक कहता है कि क्षैतिज रेखा और <hr /> यह है कि इसलिए मैं यह करता हूं। शीर्षक शायद स्टाइल क्षैतिज रेखा पढ़ा जाना चाहिए।

— रयान बेयेन

11

HTML5 में, <hr>टैग एक विषयगत विराम को परिभाषित करता है। HTML 4.01 में, <hr>टैग एक क्षैतिज नियम का प्रतिनिधित्व करता है।

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

इसलिए परिभाषा के बाद, मैं पसंद करूंगा <hr>

— bpoiss
स्रोत

10

यदि आप वास्तव में एक विषयगत विराम चाहते हैं , तो हर तरह से <hr>टैग का उपयोग करें ।

यदि आप केवल एक डिज़ाइन लाइन चाहते हैं, तो आप सीएसएस क्लास जैसी किसी चीज़ का उपयोग कर सकते हैं

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

और इसका उपयोग करें

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

— सर्व-इंक
स्रोत

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>

स्निपेट का विस्तार करें

— नदीम कासमी
स्रोत

आपने इस प्रश्न का उत्तर नहीं दिया है कि "सबसे अधिक व्यावहारिक कौन है?"

— ब्रायन टॉम्पसेट -

1

मेरा सरल समाधान है कि आप सीएसएस के साथ जीरो टॉप एंड बॉटम मार्जिन, जीरो बॉर्डर, 1 पिक्सेल की ऊंचाई और विषम बैकग्राउंड कलर के साथ घंटा बजाएं। यह स्टाइल को सीधे सेट करके या कक्षा को परिभाषित करके किया जा सकता है, उदाहरण के लिए, जैसे:

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

— FredG
स्रोत

1

यह आवश्यकता पर निर्भर करता है, लेकिन कई डेवलपर्स सुझाव आपके कोड को यथासंभव सरल बनाने के लिए है । इसलिए, उसके लिए सरल "hr" टैग और CSS कोड के साथ जाएं।

— राम प्रसाद
स्रोत

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-hora-line.html