css – 导航栏包装在较小的分辨率上

我正在尝试将 HTML5 / CSS3作为学习过程,但我正在努力创建一个导航栏,用于指向我页面中其他部分的链接.
我从找到的教程中调整了代码并且它可以工作,但只有在1080p的分辨率下查看时,如果宽度较小,则条形图包裹在其他线条上.

无论用户使用什么分辨率,我如何确保导航栏只占用一行(缩小到适合)？

这是导航栏的CSS代码.请注意,在导航下我已将宽度设置为33.3％并填充相同以使按钮居中.我不知道这是不是原因.

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; 
}

解决方法

你几乎正确地做到了.你的CSS的问题是white-space：Nowrap;仅适用于内联元素 – 但您使用的是浮点数.即使你设置display：inline,浮动元素也会变成块级别;属性到这样的元素(它不会被应用).所以 – 如果你用display：inline-block替换你的浮动; – 你的白色空间属性将工作:)

这里可以看到内联块和空白区域的实例：http://jsfiddle.net/skip405/wzgcH/

至于你的定心方法 – 有一个更好的解决方案. (您可以删除填充并设置适当的宽度)特别是如果您使用内联块.只需设置text-align：center;在他们的父母 – 你会让它集中.

原文地址：https://www.jb51.cc/css/215023.html