किसी तत्व की चौड़ाई को पिक्सेल द्वारा कम करने के लिए कैसे करें जब इसे

Question

में परिभाषित किया गया है मेरे पास चार तत्व हैं जिनमें से प्रत्येक की चौड़ाई 25% पर सेट है। वे पूरी तरह से पृष्ठ की चौड़ाई भरें।

मैं प्रत्येक के बीच 1px अंतर रखना चाहता हूं। अगर मैं ऐसा करता हूं (उदाहरण के लिए margin-right: 1px;), अंतिम तत्व अगली पंक्ति पर बहती है। पहली बार पिक्सेल में चौड़ाई की गणना किए बिना 1px द्वारा प्रत्येक तत्व की चौड़ाई को कैसे कम किया जा सकता है?

Answer 1

मैं सिर्फ एक समाधान अपने आप को टिप्पणी में @Lubnah की मदद से पाया है,।

.tab-list li { 
    margin-right: -1px; 
    border-left: 1px solid #fff; 
} 

.tab-list li:first-of-type { 
    border-left: none; 
    margin-right: 0px; 
} 

Answer 2

चौड़ाई कंटेनर के अंदर गणना की जाती है। आपके द्वारा सेट किए गए किसी भी पैडिंग या मार्जिन को चौड़ाई में जोड़ा जाएगा।

23% करने के लिए अपने चौड़ाई सेट करें और 1% करने के लिए अपने मार्जिन

बायां हाशिया (1) के साथ साथ चौड़ाई (23) के साथ साथ सही मार्जिन (1) = 25. यही कारण है, पृष्ठ पर चार बार रखा ऊपर जोड़ देगा 100

Answer 3

को आप सीएसएस calc उपयोग कर सकते हैं, लेकिन इसके ब्राउज़र समर्थन अधूरा है:

width: calc(25% - 1px); 
width: -moz-calc(25% - 1px); 
width: -webkit-calc(25% - 1px); 

Answer 4

आप चौड़ाई ऑटो और मार्जिन-सही के साथ प्रत्येक तत्व के अंदर एक आंतरिक div होने से थोड़ा धोखा कर सकता है: 1px

इस बेला देखें: http://jsfiddle.net/7R6zZ/

<div class="outer"> 
<div class="inner">1</div> 
</div> 
<div class="outer"> 
<div class="inner">2</div> 
</div> 
<div class="outer"> 
<div class="inner">3</div> 
</div> 
<div class="outer"> 
<div class="inner">4</div> 
</div> 

.outer { 
width:25%; 
float:left; 
} 
.outer .inner { 
width:auto; 
margin-right:1px; 
background:#999; 
min-height:300px; 
} 

Answer 5

उपयोग box-sizing: border-box; और सीमाओं।

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
div { 
    width: 25%; 
    border-right: 1px solid right; 

}

Answer 6

उपयोग बॉक्स आकार के रूप में box-sizing:border-box और पृष्ठभूमि के रूप में एक ही रंग के साथ 1px सही सीमा का उपयोग

.box{ 
     width:25%; 
     box-sizing:border-box; 
     border-right: 1px solid "same color as your background" 
}