thanh điều hướng nằm trên các độ phân giải nhỏ hơn

Question

Tôi đang thử dùng HTML5/CSS3 như một quá trình học tập nhưng tôi đang cố gắng tạo thanh điều hướng cho các liên kết đến các phần khác trên các trang của tôi. Tôi đã chỉnh sửa mã từ một hướng dẫn được tìm thấy và nó hoạt động nhưng chỉ khi được xem ở độ phân giải 1080p, nếu chiều rộng nhỏ hơn, thanh sẽ kết thúc tốt hơn trên các dòng khác.

Làm cách nào để đảm bảo rằng thanh điều hướng chỉ chiếm một dòng (thu nhỏ để vừa) cho dù người dùng đang sử dụng độ phân giải nào?

Đây là mã CSS của tôi cho thanh điều hướng. Xin lưu ý, dưới nav tôi đã thiết lập chiều rộng đến 33,3% và padding để cùng để trung tâm các nút. Tôi không biết đây có phải là nguyên nhân không.

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

Bạn gần như đã làm đúng. Vấn đề với css của bạn là white-space: nowrap; chỉ hoạt động đối với inline yếu tố - nhưng bạn đang sử dụng float. Các phần tử nổi trở thành mức khối ngay cả khi bạn đặt thuộc tính display: inline; thành một phần tử như vậy (nó sẽ không được áp dụng). Vì vậy, - nếu bạn thay thế nổi của bạn với display: inline-block; - bất động sản white-space bạn sẽ làm việc :)

Một ví dụ sống của inline-block s và white-space có thể được nhìn thấy ở đây: http://jsfiddle.net/skip405/wzgcH/

Đối với phương pháp định tâm của bạn - có một giải pháp tốt hơn . (Bạn có thể xóa padding và đặt chiều rộng thích hợp) Đặc biệt nếu bạn đang sử dụng các khối nội tuyến. Chỉ cần đặt text-align: center; trên cha mẹ của chúng tôi - và bạn sẽ tập trung vào nó.

Answer 2

Vấn đề là bạn đang đặt chiều rộng nav chỉ bằng 33,3% với phần còn lại là phần đệm. Các không gian nhỏ cho phép sau đó đẩy tất cả các yếu tố bên dưới nhau khi thay đổi kích thước qua một điểm nhất định. Để ngăn chặn điều này xảy ra, bạn có thể làm hai việc, thiết lập chiều rộng nav là 100% thay vào đó, và thứ hai, nếu bạn không muốn thay đổi kích thước thì bạn phải cung cấp cho nó min-width tổng của tất cả a chiều rộng của các phần tử được đặt lại với nhau. Bạn cũng nên cung cấp cho nó một số max-width trừ khi bạn đang sử dụng thiết kế đáp ứng. Đây là bản trình diễn tôi đã đặt cùng với css được sửa đổi của bạn: http://jsfiddle.net/c3HE6/