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