Question

我正在尝试将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; 
}

Answer 1

你几乎正确地做到了。您的css存在的问题是white-space: nowrap;仅适用于inline元素 - 但您使用的是float。即使您将display: inline;属性设置为此类元素（不会应用它），浮动元素也会变为块级别。所以 - 如果你用display: inline-block;替换你的浮动 - 你的white-space属性将起作用：）

此处可以看到inline-block和white-space的实际示例：http://jsfiddle.net/skip405/wzgcH/

至于你的定心方法 - 有一个更好的解决方案。（您可以删除padding并设置适当的宽度）特别是如果您使用的是内联块。只需在父上设置text-align: center; - 您就可以将其置于中心位置。

Answer 2

问题是你将nav宽度设置为仅为33.3％，其余为填充。当调整大小超过某一点时，小的允许空间然后将所有元素推到彼此之下。要阻止这种情况发生，你可以做两件事，将导航宽度设置为100％，其次，如果你不想让它根本调整大小，那么你必须给它一个min-width的总和将所有a元素的宽度放在一起。除非您使用的是响应式设计，否则您最有可能也会给它max-width。这是我与修改过的css http://jsfiddle.net/c3HE6/

组合在一起的演示

Answer 3

如果您不想遍历并更改导航栏中每个元素的显示属性，那么这里的另一个好选择是简单地指定导航栏的样式以具有最小宽度。当您减小屏幕尺寸时，这可以防止自动换行。

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

3 个答案: