बॉर्डर की लंबाई div चौड़ाई से छोटी है?

Question

मेरे पास कोड है

div {
   width:200px;
   border-bottom:1px solid magenta;
   height:50px;   
}

डेमो

Div चौड़ाई 200px है, इसलिए बॉर्डर-बॉटम भी 200px है, लेकिन मुझे क्या करना चाहिए अगर मैं डिव चौड़ाई को बदले बिना बॉर्डर-बॉटम केवल 100px चाहता हूं?

Answer 1

आप छद्म उपयोग कर सकते हैं। उदाहरण के लिए

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

<div>Item 1</div>
<div>Item 2</div>

प्रस्तुति के उद्देश्य के लिए अतिरिक्त मार्कअप का उपयोग करने की आवश्यकता नहीं है। : के बाद IE8 से भी समर्थित है।

संपादित करें:

यदि आप एक दाएँ संरेखित सीमा की जरूरत है, बस बदलने के left: 0साथright: 0

यदि आपको केंद्र-संरेखित सीमा की आवश्यकता है तो बस सेट करें left: 50px;

Comments

यह मेरी तकनीक भी थी, लेकिन ध्यान दें कि यह div के बाईं ओर सीमा देगा। यदि आप इसे केंद्रित करना चाहते हैं, तो दे div:before left: 50px।

— चौलेट

यह प्रश्न निर्दिष्ट नहीं करता है कि सीमा किस स्थिति में है इसलिए मुझे अन्य पदों पर विचार नहीं करना चाहिए

— Fabrizio Calderan

यदि नीचे की सीमा की चौड़ाई 50% है और आप इसे केन्द्रित करना चाहते हैं, तो स्टाइल की आवश्यकता है left: 25%क्योंकि यह 25% + 50% + 25% होगा

— स्किफ्ट

हां मैं इस उदाहरण से अवगत हूं कि यह काम करता है। लेकिन दूसरों के लिए कुछ ऐसा ही करना जो इसे उत्तरदायी बनाने की कोशिश कर सकता है, आपको% का उपयोग करने की आवश्यकता हो सकती है क्योंकि उस स्थिति में मुझे इसके जवाब की आवश्यकता थी।

— 17:11

का प्रयोग करें margin: auto, right: 0, left: 0पर :beforeलाइन केंद्रित करने के लिए। यदि यह आपकी मदद करता है तो अपवोट करें।

— अले_इनफो

Answer 2

ऐसा करने का एक और तरीका (आधुनिक ब्राउज़रों में) एक नकारात्मक प्रसार बॉक्स-छाया के साथ है। इस अद्यतन फ़िडेल को देखें: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

मुझे लगता है कि सबसे सुरक्षित और सबसे अधिक संगत तरीका ऊपर स्वीकार किए गए उत्तर है, हालांकि। बस सोचा था कि मैं एक और तकनीक साझा करूंगा।

Answer 3

आप एक रैखिक ढाल का उपयोग कर सकते हैं:

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
	background-position: bottom;
	background-size: 100% 25px;
	background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

<div></div>

Answer 4

मैंने इस तरह h3 टैग के तहत लाइन को जोड़ा

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}

Answer 5

आपके पास div से अलग आकार की सीमा नहीं हो सकती।

समाधान केवल 1pixel बॉर्डर और ऊंचाई में केवल 1pixel के साथ, नीचे, केंद्रित या पूर्ण स्थिति में एक और div जोड़ने के लिए होगा।

http://jsfiddle.net/WuZat/3/

मैंने मूल सीमा को छोड़ दिया ताकि आप चौड़ाई देख सकें, और दो उदाहरण हैं - एक 100 चौड़ाई के साथ, और दूसरा 100 चौड़ाई के साथ। जिसको आप उपयोग नहीं करना चाहते, उसे हटा दें।

Answer 6

पार्टी के लिए देर से लेकिन जो कोई भी 2 सीमाओं (मेरे मामले में नीचे और दाईं ओर) बनाना चाहता है, आप स्वीकृत उत्तर में तकनीक का उपयोग कर सकते हैं और जोड़ सकते हैं: दूसरी पंक्ति के लिए psuedo-element के बाद बस फिर गुणों को बदलें so: http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

Answer 7

मेरे पास डिव कंटेनर में चित्रों के बीच कुछ निचली सीमा होने का मामला है और सबसे अच्छी एक लाइन कोड थी - बॉर्डर-बॉटम-स्टाइल: इनसेट;

Answer 8

div{
    font-size: 25px;
    line-height: 27px;
    display:inline-block;
    width:200px;
    text-align:center;
}

div::after {
    background: #f1991b none repeat scroll 0 0;
    content: "";
    display: block;
    height: 3px;
    margin-top: 15px;
    width: 100px;
    margin:auto;
}

Answer 9

मैंने अपने प्रोजेक्ट में कुछ ऐसा किया है। मैं इसे यहां साझा करना चाहूंगा। आप बच्चे के रूप में एक और तलाक जोड़ सकते हैं और इसे छोटी चौड़ाई के साथ सीमा दे सकते हैं और इसे सामान्य सीएसएस के साथ बाएं, केंद्र या दाएं रख सकते हैं

HTML कोड:

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

नीचे के रूप में सीएसएस:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

Answer 10

सीमा को संपूर्ण HTML तत्व दिया गया है। यदि आप आधा नीचे की सीमा चाहते हैं, तो आप इसे स्पैन जैसे कुछ अन्य पहचान योग्य ब्लॉक के साथ लपेट सकते हैं।

HTML कोड:

<div> <span>content here </span></div>

नीचे के रूप में सीएसएस:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid magenta;   
    } 

Answer 11

ये सहायता करेगा:

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

<hr width="50%">

यह 50% की चौड़ाई के साथ एक क्षैतिज रेखा बनाता है, यदि आप शैली को संपादित करना चाहते हैं तो आपको कक्षा बनाने / संशोधित करने की आवश्यकता होगी।

Comments

यह मददगार नहीं है। आवश्यकता div की सीमा है

— ahmednawazbutt

Answer 12

मैंने बस इसके उपयोग के विपरीत को पूरा किया :afterऔर ::afterक्योंकि मुझे अपनी निचली सीमा को बिल्कुल बनाने की आवश्यकता थी1.3rem व्यापक :

जब मैंने उपयोग किया :beforeऔर :afterउसी समय तत्वों को क्षैतिज रूप से संरेखित किया गया display: flex, flex-direction: rowऔर , और मेरा तत्व सुपर विकृत हो गया align-items: center।

आप कुछ व्यापक या संकीर्ण बनाने के लिए इसका उपयोग कर सकते हैं, या शायद कोई गणितीय आयाम मोड:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

क्षमा करें, यह SCSSसंख्याओं को 10 से गुणा करना है और चर को कुछ सामान्य मानों के साथ बदलना है।