Genişliği yüzde olan bir div'a nasıl 1px kenarlık ekleyebilirim?

Question

Ben sorunumu açıklayan bu jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/ var.

Pencereden% 20 olması için üst kısımdaki menü öğelerini istiyorum ama aynı zamanda onları bir 1px sağ kenarının olması gerektiği.

sen biraz dışarı görebileceğiniz gibi, bu çok belirgindir.

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

Ben o zaman farklı pencere boyutları ile tutarlı olmaz çünkü bir yüzde sınır çalışacak sanmıyorum.

kimse bunu başarabilirsiniz dair herhangi bir öneriniz var mı?

Answer 1

Bunun için bunun için css box-sizing kullanabilirsiniz: Böyle

:

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

Answer 2

Sadece aynı şeyi yapmak zorunda bir proje ile karşılaştım. Kutu boyutlandırma muhtemelen en iyi cevap olsa da, oluşturulmuş olanları kullanmaya karar verdim (öğemle ilgili bazı sorunlar nedeniyle).

Li'nin (genişlik + dolgu) x sayısını% 100'e eşit olarak ayarlayın, sonra mutlak konumlandırılmış 12px genişlik,% 100 yükseklik li: öğelerin en üstüne geldikten sonra: 0, sağa: -6px; her li Li: kutuları ile aynı hizada hep hatları altında (tarayıcılar yüzdeleri fraksiyonel piksel kalıntılarını hesaplamak doğru şekilde son çocuk farklı nedenle bazen elemanların genişliği ekler bile, süzülüyor elementlerin en sağında bir boşluk var yüzdürüldü % 100'e kadar) ve li: son çocuk: gösterilecek şekilde ayarlandı: yok. İşte

örnek olarak js keman bir düzenleme var: http://jsfiddle.net/DZLTJ/12/

Notlar: Benim sayfasında,% olarak belirlenen dolgu daha küçük asla: öğenin genişlik px geçiyor, bu yüzden sonra içerik kutusu olur asla gizlenmez.

Kutu boyutlandırma ve: sonra tüm tarayıcılarda destekledikten sonra post 7, ancak: son çocuk aslında daha az desteğe sahip, yani 8 gibi. Ben de dediğim gibi, kutu boyutlandırma muhtemelen daha iyi bir seçimdir, ancak benim durumumda kesinlikle konumlandırılmış eleman daha iyi bir uyumdaydı - bunun başka biri için de söz konusu olması gerektiğini düşünmeye değerdi.

Answer 3

sınırında için, benim için çalışmıyor

outline: 1px solid black; 

tüm modern tarayıcılarda bu işleri

, ancak IE6 ve 7