8

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

3 回答 3

11

你几乎做对了。您的 css 的问题在于它white-space: nowrap;仅适用于inline元素 - 但您正在使用float. 即使您将display: inline;属性设置为此类元素，浮动元素也会变为块级（不会应用）。所以 - 如果你用你的花车替换你的财产display: inline-block;- 你的white-space财产将工作:)

inline-blocks 的一个活生生的例子white-space可以在这里看到：http: //jsfiddle.net/skip405/wzgcH/

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

于 2012-07-30T20:13:33.647 回答
0

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

于 2012-07-30T19:59:58.213 回答
0

另一个不错的选择是，如果您不想更改导航栏中每个元素的显示属性，只需将导航栏的样式指定为具有最小宽度。当您减小屏幕尺寸时，这可以防止换行。

于 2020-01-02T04:13:22.823 回答