响应式导航,无法定义百分比宽度/高度
问题描述:
因此,我正在尝试构建一个响应式导航菜单,该菜单将与媒体查询进行缩放。响应式导航,无法定义百分比宽度/高度
问题是(而且这是一个愚蠢的我不能工作),我不能让一个标签出现块级元素(我认为)。
这里的HTML:
<div class="navbuttons">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Expertise</a></li>
<li><a href="#">Capabilities</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- end div navbuttons -->
而CSS:
.navbuttons {
position: relative;
height: 100px;
width: 50%;
background-color: blue;
float: left;
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.navbuttons ul {
list-style: none;
margin:0;
padding:0;
float: left;
}
.navbuttons li {
float:left;
}
.navbuttons li a {
background: #444;
display: block;
float: left;
line-height: 100px;
height: 100%;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 16.5%;
}
然而,如果我用像素来定义宽度/高度,我可以让它看起来大概我多么希望(尽管它显然不是流畅的,就像我需要的那样)。
.navbuttons {
position: relative;
height: 100px;
width: 50%;
background-color: blue;
float: left;
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.navbuttons ul {
list-style: none;
margin:0;
padding:0;
float: left;
}
.navbuttons li {
float:left;
}
.navbuttons li a {
background: #444;
display: block;
float: left;
line-height: 100px;
height: 100px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
哪里出错了?
答
一旦您指定display: block;
,A标签确实是块级别,但是,16.5%是从其自然宽度(即基于内部文本的100%宽度)计算出来的。
根据您的需要,您可能需要删除宽度参数并简单地添加填充。请参阅:http://jsfiddle.net/bLS6B/。这样,宽度取决于导航文本,而不是某个预设宽度。或者,您可以指定具有相似效果的120%。
这个人已经在这里做了:http://designshack.net/articles/css/code-a-responsive-navigation-menu/ 虽然我不能让它以类似的方式工作。 – andy 2012-07-06 22:51:49
你的代码和他的代码有很多不同之处。例如,他不会将LI浮动到左边。尝试删除初学者。 http://jsfiddle.net/bLS6B/2/ – 2012-07-06 23:13:56
@DerekHunziker伟大的人...希望我能接受这个答案..但Q.不是我的+1 ...谢谢 – 2013-04-04 18:53:03