क्षैतिज रेखा और html में यह कोड करने के लिए सही तरीके से, सीएसएस

मैं कुछ ब्लॉक के बाद एक क्षैतिज रेखा आकर्षित करने की आवश्यकता है, और मैं तीन तरीके यह करना है:क्षैतिज रेखा और html में यह कोड करने के लिए सही तरीके से, सीएसएस

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 pseudoclass की तरह उपयोग

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

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

सबसे व्यावहारिक कौन सा तरीका है?

स्रोत

2013-02-11 Павел Тявин

पर बल दिया मुझे लगता है कि होगा ''

सबसे अर्थ है। मेरा मतलब है, यह नहीं है कि इसका क्या अर्थ है? – j08691

क्यों 'सीमा-तल' का उपयोग न करें? – jsweazy

एचटीएमएल 5 में एचटीएमएल

तत्व अनुच्छेद-स्तर तत्वों के बीच विषयगत ब्रेक का प्रतिनिधित्व करता है (उदाहरण के लिए, किसी कहानी में दृश्य का परिवर्तन, या किसी अनुभाग के साथ विषय की शिफ्ट)। –

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; 
}

स्रोत

2013-02-11 21:25:08 moettinger

पाठ्यक्रम के

टैग का उपयोग कर। – moettinger

** नोट: ** यदि आप हमेशा पृष्ठ के केंद्र में रहना चाहते हैं तो 'मार्जिन: 1em ऑटो' का उपयोग करें। –

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

मैं अर्थपूर्ण मार्कअप के लिए जाना चाहूंगा, <hr/> का उपयोग करें।

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

स्रोत

2013-02-11 21:24:23 bevacqua

यह HTML5 –

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

शीर्षक क्षैतिज रेखा और

कहता है कि मैं इसे अप करता हूं। शीर्षक शायद स्टाइल क्षैतिज रेखा पढ़ना चाहिए था। –

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

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

तो परिभाषा के बाद, मुझे पसंद करेंगे <hr>

स्रोत

2013-02-11 21:25:03 bpoiss

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

तुम सिर्फ एक डिजाइन लाइन चाहते हैं, आप सीएसएस वर्ग की तरह कुछ इस्तेमाल कर सकते हैं

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

और

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

स्रोत

2017-04-24 15:12:40

मेरे सरल उपाय की तरह उपयोग सीएसएस के साथ शैली घंटा है शून्य शीर्ष & नीचे मार्जिन, शून्य सीमा, 1 पिक्सेल ऊंचाई और विपरीत पृष्ठभूमि रंग होना है। यह शैली सीधे सेट करके या जैसे उदाहरण के लिए एक वर्ग को परिभाषित करने,, द्वारा किया जा सकता:

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

स्रोत

2017-08-26 01:54:46 FredG

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

स्रोत

2017-09-04 17:04:03

यह प्रश्न का उत्तर नहीं प्रदान करता है। एक बार आपके पास पर्याप्त [प्रतिष्ठा] (https://stackoverflow.com/help/whats-reputation) हो जाने पर आप [किसी भी पोस्ट पर टिप्पणी कर सकेंगे] (https://stackoverflow.com/help/privileges/comment); इसके बजाय, [उन उत्तरों को प्रदान करें जिन्हें पूछताछ से स्पष्टीकरण की आवश्यकता नहीं है] (https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- i-कर-बजाय)। - [समीक्षा से] (/ समीक्षा/कम गुणवत्ता वाली पोस्ट/17232637) – bish

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

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

पाठ

स्रोत

2018-02-06 00:10:42 bruh

कृपया अपना उत्तर बताएं एक टिप्पणी जोड़ें। – Barthy

क्षैतिज रेखा और html में यह कोड करने के लिए सही तरीके से, सीएसएस

उत्तर

संबंधित मुद्दे