Làm cách nào để thêm đường viền 1px vào div có chiều rộng là phần trăm?

Question

Tôi có jsfiddle này http://jsfiddle.net/tara_irvine/DZLTJ/1/ giải thích vấn đề của tôi.

Tôi muốn các mục menu ở trên cùng là 20% của cửa sổ nhưng tôi cũng muốn chúng có đường viền phải 1px.

Như bạn có thể thấy nó hơi ra, điều này rất đáng chú ý.

---------------------------------------------- 
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 | 
---------------------------------------------- 
|   row one needs to be same   |  
---------------------------------------------- 

Tôi không nghĩ rằng biên giới tỷ lệ phần trăm sẽ hoạt động vì nó sẽ không nhất quán với các kích thước cửa sổ khác nhau.

Có ai có bất kỳ đề xuất nào về cách tôi có thể thực hiện việc này không?

Answer 1

Đối với điều này bạn có thể sử dụng css box-sizing cho việc này:

như thế này:

#nav_1232938 li, .row { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Answer 2

Tôi chỉ chạy vào một dự án mà tôi đã phải làm điều tương tự. Mặc dù kích thước hộp có lẽ là câu trả lời tốt nhất, tôi quyết định sử dụng được tạo ra: sau các phần tử (vì một số vấn đề cụ thể cho dự án của tôi).

Tôi đặt số li (width + padding) x số li bằng 100%, sau đó chiều rộng tuyệt đối định vị 12px, 100% chiều cao li: sau khi phần tử lên trên: 0, phải: -6px; của mỗi li. Lý do: con cuối cùng được thả xuống bên phải để nó luôn luôn tuôn ra với các hộp bên dưới (trình duyệt tính toán các phần còn lại của pixel theo tỷ lệ khác nhau, vì vậy đôi khi bạn có một khoảng trống ở phía xa bên phải các phần tử nổi của bạn, ngay cả khi chiều rộng của phần tử thêm vào tối đa 100%) và li: con cuối cùng: sau khi được đặt thành display: none.

Dưới đây là một chỉnh sửa của js fiddle của bạn như là một ví dụ: http://jsfiddle.net/DZLTJ/12/

Ghi chú: Trong trang của tôi, đệm đặt trong% sẽ không bao giờ được nhỏ hơn: sau khi chiều rộng phần tử đặt trong px, vì vậy hộp nội dung sẽ không bao giờ bị che khuất.

Kích thước hộp và: sau khi được hỗ trợ trong tất cả các trình duyệt, ví dụ: 7, nhưng: con cuối cùng thực sự có ít hỗ trợ hơn, không có nghĩa là 8. Như tôi đã nói, kích thước hộp có thể là lựa chọn tốt hơn, nhưng trong trường hợp của tôi hoàn toàn vị trí sau khi phần tử là một phù hợp hơn - nghĩ rằng nó sẽ là đáng nói đến trong trường hợp nó đã được cho bất cứ ai khác quá.

Answer 3

Đối với biên giới, bạn có thể sử dụng

outline: 1px solid black; 

làm việc này trên tất cả các trình duyệt hiện đại, nhưng không phải trên IE6 và 7