मैं अपने <hr> टैग की मोटाई कैसे बदल सकता हूं

Question

मैं <hr>सीएसएस में अपने क्षैतिज नियम ( ) की मोटाई बदलना चाहता हूं । मुझे पता है कि यह HTML में ऐसा किया जा सकता है -

<hr size="10">

लेकिन मैंने सुना है कि यह है पदावनत के रूप में उल्लेख किया यहाँ MDN । CSS में मैंने उपयोग करने की कोशिश की height:1pxलेकिन यह मोटाई को नहीं बदलता है। मैं चाहता हूं कि <hr>रेखा 0.5pxमोटी हो।

मैं Ubuntu पर फ़ायरफ़ॉक्स 3.6.11 का उपयोग कर रहा हूँ

Comments

मैं चाहता हूं कि यह वास्तव में पतली हो, उपयोगकर्ता को वहां नोटिस नहीं करना चाहिए जब तक कि वह विशेष रूप से इसके लिए नहीं दिखता है। वैसे भी कोशिश ...

— श्रीकर अप्पलाराजू

आप इसे पृष्ठभूमि के रंग के रूप में बनाने की कोशिश कर सकते हैं, इसलिए इसमें मिश्रण होता है ...

— JustcallmeDrago

चूंकि 1px न्यूनतम है, तो आपको लाइन को हल्का ग्रे बनाना चाहिए यदि आप चाहते हैं कि यह कम ध्यान देने योग्य हो।

— गर्ट ग्रेन्डर

@MovieYoda: आयाम सबपिक्सल जा सकते हैं, लेकिन रेंडरिंग निकटतम पिक्सेल के लिए गोल होगा। यह एक पूर्णांक मान 1.23784 होने की उम्मीद करने जैसा है ... असंभव। आप इसे इस तरह के मान पर सेट कर सकते हैं लेकिन यह निकटतम पूर्ण संख्या में गोल हो जाएगा। सैद्धांतिक रूप से आप प्रौद्योगिकी बारीकियों के कारण LCDs पर पिक्सेल की 1/3 तक की चौड़ाई को रेंडर कर सकते थे, लेकिन मुझे लगता है कि ब्राउज़रों को वास्तव में संदेह है। शेष सबपिक्सल आयाम किसी भी रंग का नहीं हो सकता है क्योंकि यह आरजीबी फास्फोरस में से केवल एक से संबंधित है।

— रॉबर्ट कोरिटनिक

आधा पिक्सेल नहीं, आधा px। सवाल पूरी तरह से मूर्खतापूर्ण नहीं है। reddit.com/r/shittyprogramming/comments/20zyea/…

— ल्यूक रहमान

Answer 1

स्थिरता के लिए किसी भी सीमा को हटा दें और <hr>मोटाई के लिए ऊंचाई का उपयोग करें । एक पृष्ठभूमि रंग जोड़ना आपके द्वारा <hr>निर्दिष्ट ऊँचाई और रंग के साथ स्टाइल करेगा ।

अपनी स्टाइलशीट में:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

या इनलाइन आपके पास है:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

यहां लंबी व्याख्या

Comments

तुम क्यों कर रहे हैं border:none? कोई कारण? क्या सीमा भी मोटाई जोड़ती है?

— श्रीकर अप्पाराजु

हां, हम स्थिरता के लिए लाइन प्रदर्शित करने के लिए पृष्ठभूमि रंग का उपयोग करना चाहते हैं। FF बॉर्डर का उपयोग <hr> करने के लिए करता है, लेकिन ऐसा नहीं करता है। इससे वे दोनों एक जैसे हो जाएंगे।

— ग्रीग बी

हाँ, मैंने हमेशा क्रॉस-ब्राउज़र पाया है <hr> टैग अप्रिय। उन्हें सही व्यवहार करना अच्छा लगता है।

— ग्रेग बी

या, अगर आपको सिर्फ एक-ऑफ की जरूरत है, तो आप इसके साथ इनलाइन कर सकते हैं<hr style="border: none; height:1px; color:#333; background-color:#333;">;

— जेसी चिशोल्म

आईबैक के लिए IE कितना पुराना है color?

— २०:४१

Answer 2

ब्राउज़रों में उप-पिक्सेल रेंडरिंग

उप-पिक्सेल रेंडरिंग मुश्किल है। आप वास्तव में पिक्सेल पतली रेखा से कम रेंडर करने के लिए मॉनिटर की उम्मीद नहीं कर सकते। लेकिन उप-पिक्सेल आयाम प्रदान करना संभव है। ब्राउज़र के आधार पर वे इन्हें अलग तरह से प्रस्तुत करते हैं। इसके बारे में जॉन रेजिग के ब्लॉग पोस्ट को देखें।

मूल रूप से यदि आपका मॉनिटर एक एलसीडी है और आप ऊर्ध्वाधर रेखाएँ खींच रहे हैं, तो आप आसानी से 1/3 पिक्सेल लाइन खींच सकते हैं। यदि आपकी पृष्ठभूमि सफेद है, तो अपनी लाइन का रंग दें #f0f। आंख के लिए यह रेखा पिक्सेल की 1/3 चौड़ी होगी। हालाँकि यह कुछ रंग का होगा, यदि आप मॉनिटर को बड़ा करेंगे, तो आप देखेंगे कि पूरे पिक्सेल का केवल एक खंड (RGB से मिलकर) अंधेरा होगा। यह बहुत ज्यादा तकनीक है जिसका उपयोग ठीक प्रकार की हिंटिंग यानी क्लियरटाइप के लिए किया जाता है ।

लेकिन क्षैतिज रेखाएँ केवल पूर्ण पिक्सेल ऊँची हो सकती हैं। यह एलसीडी मॉनिटर की प्रौद्योगिकी सीमा है। CRTs उनके त्रिकोणीय फॉस्फोरस के साथ और भी जटिल थे (जब तक कि वे एपर्चर जंगला प्रकार के नहीं थे । सोनी ट्रिनिट्रॉन) लेकिन यह एक अलग कहानी है।

मूल रूप से एक उप-पिक्सेल आयाम प्रदान करना और उस तरह से रेंडर करने की अपेक्षा करना वैसा ही है जैसा कि 1.2034759349 की संख्या को स्टोर करने के लिए पूर्णांक चर की अपेक्षा करना। यदि आप समझते हैं कि यह असंभव है, तो आपको समझना चाहिए कि मॉनिटर उप-पिक्सेल आयामों को प्रस्तुत करने में सक्षम नहीं हैं।

क्रॉस ब्राउज़र सुरक्षित शैली

लेकिन जिस तरह से क्षैतिज नियमों का मिश्रण होता है वह आमतौर पर रंगों का उपयोग करके किया जाता है। इसलिए यदि आपके पृष्ठभूमि उदाहरण सफेद के लिए है ( #fff) आप हमेशा अपने कर सकते हैं HR बहुत प्रकाश। की तरह #eee।

बहुत हल्के क्षैतिज नियम के लिए क्रॉस ब्राउज़र सुरक्षित शैली होगी:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

और इन-लाइन शैलियों के बजाय एक सीएसएस फ़ाइल का उपयोग करें। वे पूरी साइट के लिए न केवल एक विशेष तत्व के लिए एक केंद्रीय परिभाषा प्रदान करते हैं। यह रखरखाव को बहुत बेहतर बनाता है।

Answer 3

मैं 1px लाइन खींचने के लिए सबसे छोटा रास्ता ढूंढ रहा था, क्योंकि अलग सीएसएस का पूरा भार सबसे तेज़ या सबसे छोटा समाधान नहीं है।

HTML5 तक, WAS 1px hr के लिए एक छोटा तरीका है: <hr noshade> but .. noshade का गुण <hr> HTML5 में समर्थित नहीं है। इसके बजाय CSS का उपयोग करें। (और न ही आकार, चौड़ाई, संरेखित के रूप में पहले इस्तेमाल किए जाने वाले अन्य अटूट ...)

---

अब, यह एक बहुत मुश्किल है, लेकिन अच्छी तरह से काम करता है अगर सबसे सरल 1px घंटे की जरूरत है:

भिन्नता 1, काला घंटा: (काले रंग का सर्वोत्तम उपाय)

<hr style="border-bottom: 0px">

आउटपुट: एफएफ, ओपेरा - काला / सफारी - गहरा ग्रे

---

भिन्नता 2, ग्रे घंटा (सबसे छोटा!):

<hr style="border-top: 0px">

आउटपुट: ओपेरा - डार्क ग्रे / एफएफ - ग्रे / सफारी - लाइट ग्रे

---

विविधता 3, रंग वांछित के रूप में:

<hr style="border: none; border-bottom: 1px solid red;">

आउटपुट: ओपेरा / एफएफ / सफारी: 1 पीएक्स लाल।

Comments

मुझे खुशी होगी, अगर कोई इसे क्रोम और IE के लिए परीक्षण करेगा। पहले दो बदलाव काफी पेचीदा हैं, जासूसी। दूसरा बदलाव, जो पहले दिखाई देने वाले ब्लॉक्स 1 पीएक्स को आउटपुट करता है।

— 13

मुझे यह समाधान पसंद है क्योंकि यह किसी भी रंग की जानकारी को हार्ड-कोड नहीं करता है, जो अंधेरे-मोड के साथ संगतता के लिए उपयोगी हो सकता है। क्रोम पर ठीक काम करता है।

— tresf

Answer 4

मैं HRखुद को 0pxउच्च बनाने की सिफारिश करूंगा और इसके बजाय अपनी सीमा का उपयोग कर सकता हूं । मैंने देखा है कि जब आप ज़ूम इन और आउट (ctrl + माउस व्हील) HRखुद की मोटाई बदलते हैं, जब आप बॉर्डर सेट करते हैं तो यह हमेशा एक जैसा रहता है:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Comments

मैं देख सकता हूं कि नवीनतम क्रोम में यह शेष पृष्ठ के साथ मोटाई में बदल रहा है। क्या बुरा है, यह गायब हो सकता है यदि आप बाहर ज़ूम करते हैं :(

— पावेल अलेक्सीव

Answer 5

एचटीएमएल 5 में ऊंचाई विशेषता को चित्रित किया गया है। मैं क्या करूंगा कि घंटे के चारों ओर एक बॉर्डर बनाया जाए और बॉर्डर की मोटाई को इस तरह बढ़ाया जाए: घंटा शैली = "बॉर्डर: सॉलिड 2 पीएक्स ब्लैक;"

Answer 6

मैंने लाइन में अपारदर्शिता जोड़ी है, इसलिए यह पतला लगता है:

<hr style="opacity: 0.25">

Answer 7

मेरा मानना ​​है कि स्टाइल <hr>टैग के लिए सबसे अच्छी उपलब्धि इस प्रकार है:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

और HTML कोड के लिए बस जोड़ें <hr>:।

Answer 8

यहां 1 पिक्सेल काली रेखा के लिए कोई सीमा या मार्जिन नहीं है

hr {background-color:black; border:none; height:1px; margin:0px;}

• Google Chrome में परीक्षण किया गया

मैंने सोचा कि मैं इसे जोड़ूंगा क्योंकि अन्य उत्तरों में शामिल नहीं है margin:0px;:।

• डेमो

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Answer 9

मैं जैसे निर्माण का उपयोग करने का सुझाव देता हूं

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

Comments

हेहेह :) इससे पहले ऐसा कभी नहीं देखा गया

— प्रकाश रामन