1

我正在设计navigation menu，但我无法根据窗口调整宽度。我想做menu width 100%，当我们改变窗口大小时，菜单仍然从左角覆盖到右角。

我用于设计导航的以下代码：

HTML

<nav class="span9">
<!-- Menu-->
<ul id="menu" class="sf-menu">
    <li class=""><a href="index.html" class="sf-with-ul">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li class=""><a href="work.html" class="sf-with-ul">WORK</a></li>
    <li class=""><a href="blog.html" class="sf-with-ul">BLOG</a></li>
    <li class=""><a href="tables_princing.html" class="sf-with-ul">FEATURES</a></li>                                                        
    <li><a href="contact.html">CONTACT</a></li>
 </ul>
 <!-- End Menu-->
</nav>

CSS

.sf-menu {
    margin: 0;
    padding-top: 7px;
}
.sf-menu > li {
    position: relative;
    float: left;
    list-style: none;
    line-height: 20px;
    margin: 0 40px 0 0;
}
.sf-menu > li > a {
    text-decoration: none;
    display: block;
    font-size: 17px;
}

这里是JSFIDDLE 链接

4

2 回答 2

1

将最小宽度设置为父元素将解决此问题。但它仍然可能会创建一个滚动，或者如果您将溢出设置为隐藏，它会裁剪一些文本。为了防止这种滚动/裁剪，您可以使用 javascript 或css3 媒体查询。我更喜欢媒体查询而不是 javascript 解决方案。但是您可能需要支持 css3 的浏览器。这是修改后的带有 css 媒体查询的小提琴

.sf-menu {
margin: 0;
padding-top:7px;}
.sf-menu > li {
position: relative;
float: left;
list-style: none;
line-height: 20px;
margin: 0 40px 0 0;
}
.sf-menu > li > a {
text-decoration: none;
display: block;
font-size: 17px;
}
@media all and (min-width:500px){
.sf-menu > li {
    position: relative;
    float: left;
    list-style: none;
    line-height: 14px;
    margin: 0 30px 0 0;
}    
.sf-menu > li > a {
    text-decoration: none;
    display: block;
    font-size: 14px;
}
}
于 2013-08-06T12:12:39.373 回答
0

如果你想让导航菜单栏的宽度为 100%。为您的 HTML尝试以下CSS。

CSS

nav {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: none;
}
nav ul {
    display: table-row;
}
nav li {
    display: table-cell;
    margin: 0;
}

这里是JSFIDDLE 链接

于 2013-08-06T16:55:45.010 回答