nav bar küçük çözünürlüklerde sarılıyor

Question

HTML5/CSS3'te bir öğrenme süreci olarak elimi deniyorum ancak sayfalarımdaki diğer bölümlere bağlantılar için bir gezinme çubuğu oluşturmaya çalışıyorum. Kodu bulduğum bir öğreticiden uyarladım ve yalnızca 1080p çözünürlükte görüntülendiğinde, genişlik daha küçükse, çubuk diğer hatlara sarılır.

Kullanıcı neyi kullanırsa kullanın, nav çubuğunun yalnızca bir satır (sığdırmak için büzülür) oluşturduğundan nasıl emin olabilirim?

İşte gezinme çubuğunda benim CSS kodudur. Düğmelerin ortalanması için nav altında% 33.3 genişliğine ayarlı ve aynı seviyeye dolgu yaptım. Bunun sebebi olup olmadığını bilmiyorum.

nav { 
    display:block; 
    position: absolute; 
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600; 
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    display: inline; 
    white-space:nowrap; 
} 

nav ul li { 
    float: left; 
    position: relative; 
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px; 
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757; 
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px; 
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 3px; 
    font-size: 14px;  
} 



nav ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0; 

} 


nav ul li a:hover { 
    color: #fff; 
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
} 

Answer 1

Neredeyse doğru şekilde yaptınız. CSS'nizdeki sorun, white-space: nowrap;'un yalnızca inline öğelerinde çalıştığıdır - ancak float kullanıyorsunuz. display: inline; özelliğini böyle bir öğeye ayarlamış olsanız bile süzülmüş öğeler blok düzeyinde olur (uygulanmayacaktır). Daha iyi bir çözüm vardır - http://jsfiddle.net/skip405/wzgcH/ senin merkezleme yönteminde gelince

: - Eğer display: inline-block; ile yüzen değiştirirseniz - Yani white-space mülkiyet :)

inline-block s ve white-space burada görülebilir bir canlı örneği çalışacak . (padding'u kaldırabilir ve uygun genişlik ayarlayabilirsiniz) Özellikle satır içi bloklar kullanıyorsanız.'u numaralı ana numaralı telefondan ayarlayın ve ortalayacaksınız.

Answer 2

sorun dinlenme olmak dolgu ile sadece% 33,3 olmak nav genişliğini ayarlarken olduğunu. Küçük izin verilebilir alan daha sonra belirli bir noktadan sonra yeniden boyutlandırıldığında tüm elemanların altına itilir. Bunun olmasını engellemek için iki şey yapabilir, nav genişliğini% 100 yerine ayarlayabilirsiniz ve ikincisini yeniden boyutlandırmak istemiyorsanız, a'un toplamının min-width değerini vermeniz gerekir. öğelerin genişlikleri bir araya getirilir. Duyarlı bir tasarım kullanmıyorsanız, büyük olasılıkla max-width da vermelisiniz. İşte değiştirdiğiniz css ile bir araya getirdiğim bir demo: http://jsfiddle.net/c3HE6/