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

我试图在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; 
}

来源

2012-07-30 user1563865

你几乎做得正确。与您的CSS问题是，white-space: nowrap;只适用于inline元素 - 但您使用float。即使将display: inline;属性设置为这样的元素（它不会被应用），浮动元素也会成为块级别。所以 - 如果你display: inline-block;更换你的花车 - 你white-space属性将工作:)

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

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

来源

2012-07-30 20:13:33 skip405

非常感谢你，虐待这个尝试 – user1563865 2012-07-31 09:06:32

它适用于菜单只有一个级别。嵌套的'ul'不是。 – Moesio 2014-09-01 11:03:15

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

来源

2012-07-30 19:59:58

谢谢保罗生病了。欢呼声 – user1563865 2012-07-31 09:07:45

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

回答

相关问题