Làm thế nào để giảm chiều rộng của một phần tử bằng một pixel khi nó được xác định theo phần trăm

Question

Tôi có bốn phần tử của mỗi chiều rộng được đặt là 25%. Chúng lấp đầy chiều rộng của trang một cách hoàn hảo.

Tôi muốn đặt khoảng cách 1px giữa mỗi loại. Nếu tôi làm điều này (ví dụ: margin-right: 1px;), phần tử cuối cùng sẽ tràn vào dòng tiếp theo. Làm cách nào tôi có thể giảm chiều rộng của từng phần tử theo 1px mà không tính chiều rộng tính bằng pixel ở vị trí đầu tiên?

Answer 1

tôi vừa tìm thấy một giải pháp bản thân mình, với sự giúp đỡ của @Lubnah trong các ý kiến.

.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

Chiều rộng được tính bên trong vùng chứa. Mọi phần đệm hoặc lề bạn đặt sẽ được thêm vào chiều rộng.

Đặt chiều rộng của bạn đến 23% và lợi nhuận của bạn tới 1%

lề trái (1) cộng với chiều rộng (23) cộng với lề phải (1) = 25. Đó là, đặt bốn lần trên trang sẽ thêm lên 100.

Answer 3

Bạn có thể sử dụng CSS calc nhưng hỗ trợ trình duyệt của nó là sơ sài:

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

Answer 4

Bạn có thể lừa gạt nhẹ có một div bên trong bên trong mỗi phần tử với auto chiều rộng và margin-right: 1px

Xem fiddle này: 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

Sử dụng box-sizing: border-box; và biên giới.

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

}

Answer 6

sử dụng hộp cỡ như box-sizing:border-box và sử dụng biên giới 1px đúng với cùng một màu sắc làm nền

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