Jak dodać granicę 1px do elementu div, którego szerokość jest procentowa?

Question

Mam to jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/, które wyjaśnia mój problem.

Chcę, aby elementy menu u góry stanowiły 20% okna, ale chcę, aby miały one prawą krawędź 1px.

Jak widać, jest lekko wygaszona, jest to bardzo widoczne.

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

Nie sądzę, by granica procentowa działała, ponieważ wtedy nie byłaby zgodna z różnymi rozmiarami okien.

Czy ktoś ma jakieś sugestie, w jaki sposób mogę to osiągnąć?

Answer 1

W tym celu można użyć css box-sizing na to:

takiego:

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

Answer 2

Właśnie wpadł projektem, gdzie musiałem zrobić to samo. Chociaż rozmiar skrzyni to chyba najlepsza odpowiedź, zdecydowałem się użyć generowanego: po elementach (ze względu na pewne problemy specyficzne dla mojego projektu).

Ustawiam liczbę li (szerokość + dopełnienie) x liczbę li na równą 100%, następnie pozycję bezwzględną szerokość 12px, wysokość 100% li: po elementach do góry: 0, po prawej: -6px; każdego li. Li: ostatnie dziecko zostało wypuszczone tak, że zawsze wyrównuje się do pól poniżej (przeglądarki obliczają ułamkowe piksele z procentów inaczej, więc czasami masz miejsce po prawej stronie twoich elementów pływających, nawet jeśli szerokość elementów dodaje do 100%) i li: last-child: after został ustawiony do wyświetlenia: none.

Oto edit Twojego js skrzypce jako przykład: http://jsfiddle.net/DZLTJ/12/

Uwagi: W mojej stronie, wyściółka ustawić w% nigdy nie będzie mniejsza niż: po ustawić szerokość elementu w px, więc okno zawartość będzie nigdy nie być zasłoniętym.

Box-sizing i: after są obsługiwane we wszystkich przeglądarkach post ie 7, ale: last-child faktycznie ma mniej wsparcia, nie tj. 8. Tak jak powiedziałem, rozmiar pudełka jest prawdopodobnie lepszym wyborem, ale w moim przypadku absolutnie pozycjonowany po elemencie był lepiej dopasowany - pomyślałem, że warto wspomnieć, gdyby był dla kogoś innego.

Answer 3

Na granicy, można użyć

outline: 1px solid black; 

to działa na wszystkich nowoczesnych przeglądarkach, ale nie w IE6 i 7