एचटीएमएल/सीएसएस

Question

का उपयोग कर क्षैतिज रेखा मैं अपनी ब्लॉग साइट पर काम करने के लिए एक क्षैतिज रेखा प्राप्त करने की कोशिश कर रहा हूं, लेकिन मुझे Google क्रोम (आईई और फ़ायरफ़ॉक्स इसे पूरी तरह प्रदर्शित करता है) में लाइन प्रदर्शित करने में परेशानी हो रही है।

असल में, मेरी सीएसएस में, मैं निम्नलिखित है:

div.hr { 
background: #fff no-repeat scroll center; 
margin-left: 15em; 
margin-right: 15em; 
width:50em; 
height:.05em; 
} 

div.hr hr { 
display: none; 
} 

मेरी HTML में, मैं की तरह कुछ है:

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

किसी कारण से, गूगल क्रोम में, लाइन बस है वहाँ नहीं। समस्या अब है, मेरे पास इनमें से बहुत सारे हैं (लगभग 25):

---

और इसलिए, मैं केवल अपने सीएसएस को संशोधित करना चाहता हूं, ताकि मैं अपने HTML में न्यूनतम परिवर्तन कर सकूं।

गुगलिंग पर, मुझे लगता है कि कई लोगों को यह समस्या है, लेकिन ऐसा कोई उचित समाधान प्रतीत नहीं होता है (एक रेखा को "ड्राइंग" पर विचार करने और तस्वीर को तस्वीर के रूप में डालने पर विचार नहीं करते!)।

अगर कोई मुझे उपरोक्त समस्या को हल करने के लिए सही दिशा में इंगित कर सकता है तो मैं सराहना करता हूं।

बहुत धन्यवाद।

Answer 1

यह आपकी समस्या हो सकती है:

height: .05em; 

क्रोम दशमलव के साथ थोड़ा अजीब है, इसलिए एक निश्चित पिक्सेल ऊंचाई का प्रयास करें:

height: 2px; 

Answer 2

या height: 0.1em; orso, के न्यूनतम आकार के लिए इसे बदल कुछ भी प्रदर्शित करने योग्य 1px है।

0.05 एम आप इसका उपयोग कर रहे हैं, मौजूदा तत्वों को इस तत्व के पिक्सेल में प्राप्त करें और मुझे 5% दें। जो 12 पिक्सेल के लिए 0.6 पिक्सेल लौटाता है जो प्रदर्शित करने के लिए बहुत कम है। यदि आप div के फ़ॉन्ट आकार को कम से कम 20 पिक्सेल में बदल देंगे तो यह ठीक प्रदर्शित होगा। मुझे लगता है कि क्रोम आकार को कम से कम 1 पिक्सेल नहीं करता है जहां अन्य ब्राउज़र करते हैं।

Answer 3

मैं यह मेरा नया कोड की कोशिश है और यह आपके लिए उपयोगी साबित हो सकता है, यह गूगल chromr में पूरी तरह से काम करता है

hr { 
    color: #f00; 
    background: #f00; 
    width: 75%; 
    height: 5px; 
} 

Answer 4

आप इसे इस तरह भी कर सकता है मेरे मामले में, मैं पहले और एक के बाद इसका इस्तेमाल h1 (जानवर बल यह ehehehe)

.titleImage::before { 
content: "--------"; 
letter-spacing: -3px; 
} 

.titreImage::after { 
content: "--------"; 
letter-spacing: -3px; 
} 

पत्र रिक्ति यह इतना लाइन पाठ में मिलता है बनाता है तो उसे दूर पुश करने के लिए एक मार्जिन का उपयोग करें!