निम्नलिखित पर विचार करें:सीएसएस: सेट सीमा के आधी चौड़ाई
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
यह बॉक्स की पूरी चौड़ाई के नीचे सीमा सेट हो जाएगा (500px)। लेकिन बजाय पूरी चौड़ाई के लिए सीमा नीचे स्थापित करने की है, मैं बॉक्स नीचे के बीच में 300px स्थापित करने के लिए, चाहते हैं, मैं यह कैसे कर देना चाहिए ..
क्या आप अपने बॉक्स के नीचे <hr> फेंक सकते हैं?
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
आप ऐसा कर सकता है:
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
}<div class="box">
<div class="border">
</div>
</div>लेकिन असीमित संभावनाएं हैं। कुछ दूसरों की तुलना में अधिक अर्थपूर्ण रूप से सही हैं; यह समाधान बस एक त्वरित तय है।
आप एक पृष्ठभूमि छवि का उपयोग कर सकते हैं:
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
हां! और सीएसएस में छवि उत्पन्न करने के लिए आप सीएसएस ग्रेडियेंट्स का भी उपयोग कर सकते हैं यदि यह एक साधारण ढाल या ठोस रंग है: 'पृष्ठभूमि-छवि: रैखिक-ढाल (काला, काला); पृष्ठभूमि आकार: 50% 1 पीएक्स; पृष्ठभूमि-स्थिति: 50% 100% '। –
मैं कुछ इस तरह कर रही सुझाव है, फायरफॉक्स में अच्छी तरह से काम करता है
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
अतिरिक्त HTML तत्वों का अनावश्यक उपयोग। –
आप उपयोग कर सकते :: छद्म चयनकर्ताओं से पहले या :: ::। तरह:
<div> something here </div>
सीएसएस:
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
यहाँ है jsfiddle
डाल सकता है एक केंद्रित ''
अपने बॉक्स के नीचे? फिर आप इसे स्टाइल कर सकते हैं कि आपको इसकी आवश्यकता कैसे है। –
असल में पैडिंग इसे नियंत्रित करने के लिए है। – noob
@ मिचा जो 'बॉक्स' –