Question

我正在设计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 LINK

Answer 1

将min-width设置为parent元素将解决此问题。但它仍然可以创建一个滚动或如果你设置溢出隐藏它将裁剪一些文本。要阻止此滚动/裁剪，您可以使用javascript或css3 media query。我更喜欢javascript解决方案的媒体查询。但您可能需要css3支持的浏览器。以下是带有css媒体查询的修改后的fiddle

.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;
}
}

Answer 2

如果要使导航菜单栏的宽度为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 LINK

如何根据窗口宽度调整菜单宽度

2 个答案: