Jak zmniejszyć szerokość elementu o piksel, gdy jest zdefiniowany w procentach

Question

Mam cztery elementy, z których każda ma szerokość 25%. Doskonale wypełniają szerokość strony.

Chcę umieścić między sobą przerwę 1px. Jeśli to zrobię (na przykład margin-right: 1px;), ostatni element przepełni się do następnego wiersza. Jak mogę zmniejszyć szerokość każdego elementu przez 1px bez obliczania szerokości w pikselach?

Answer 1

właśnie znalazł rozwiązanie samodzielnie, z pomocą @Lubnah w komentarzach.

.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

Szerokość jest obliczana wewnątrz kontenera. Ustawione marginesy i dopełnienia zostaną dodane do szerokości.

Ustaw szerokość do 23%, a marża 1%

lewego marginesu (1) oraz szerokość (23) oraz prawy margines (1) = 25. To, umieszczone cztery razy na stronie doda 100.

Answer 3

można użyć CSS calc ale jego wsparcie przeglądarka jest szkicowy:

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

Answer 4

Można oszukać nieco poprzez wewnętrzną div wewnątrz każdego elementu o szerokości auto i margin-right: 1px

Zobacz ten skrzypce: 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

Używaj box-sizing: border-box; i granic.

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

}

Answer 6

użycie rozmiaru skrzynki jako box-sizing:border-box i używać 1px prawą krawędź z tego samego koloru jako tła

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