CSS 百分比宽度无效

Question

我一直在尝试为我网站的导航栏编辑 CSS，以便将其从具有固定的宽度和高度值转换为百分比值（以便它变得响应并更好地与不同的工作屏幕尺寸）。但是，当我转换值时，单个 div 的大小不正确。

我可能在这里错过了一些非常简单的东西（因为我是 CSS 和 HTML 中的自学业余爱好者），但我在这里找不到任何解决方案。

这是我的导航栏JSfiddle，使用px，正常工作

这是转换为宽度百分比值后的 JSfiddle。

相关代码（post转换）：

HTML:

<body>
<div id="container">
    <div id="menuwrap">
        <ul id="menu">
        <li id="one"><a href="#"><h class="navbartext">one</h></a></li>
        <li id="two"><a href="#"><h class="navbartext">two</h></a></li>
        <li id="three"><a href="#"><h class="navbartext">three</h></a></li>
        <li id="four"><a href="#"><h class="navbartext">four</h></a></li>
        <li id="five"><a href="#"><h class="navbartext">five</h></a></li>
        <li id="six"><a href="#"><h class="navbartext">six</h></a></li>
        <li id="seven"><a href="#"></a></li>
        </ul>
    </div>
</div>
</body>

CSS:

#container {
    width:100%;
    height:25px;
    margin:0 auto;
    background:#fff;
}

#menuwrap {
    height:25px;
    width:100%
    position:relative;
    top:25px;
    background:#fff;
}

ul#menu {
    height:25px;
    float:right;
    margin:0;
    padding:0;
    list-style-type:none;
    background:#44546A;
}

ul#menu li {
    float:left;
}

ul#menu li a {
    display: block;
    width: auto;
    height:25px;
    overflow:hidden;
    text-indent:10px;
    background:#000;
    color:#000;
}

ul#menu li#one a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#two a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#three a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#four a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#five a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#six a {
    width:17%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#seven a {
    width: 49px;
    height: 49px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
    background-color:#000;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    position:relative;
    top: -17.5px;
    left:88%;
    z-index:2;
}

ul#menu li class.a
{
width:208px;
margin:0px;
}

Answer 1

将 width: 100%; 添加到 ul#menu。

在这里查看：https://jsfiddle.net/vjhz7o8y/5/。

此外，避免对多个元素使用相同的 id，请改用 class。

ul#menu {
    height:25px;
    width:100%;
    float:right;
    margin:0;
    padding:0;
    list-style-type:none;
    background:#44546A;
}

Answer 2

我的网页设计书 Murach 的 HTML5 和 CSS3 第 3 版说使用 slickNav 作为响应式菜单。这是一个 Javascript 插件。另外，我刚刚解决了我的问题。当我应该调整它们的容器大小时，我试图调整被阻塞元素的大小。这是一些示例代码

nav {width:100%;}

nav #nav_menu {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
}

 #nav_menu > li {
    float: left;
    width:20%;
    max-width: 190px;
}

希望这对您有所帮助。

CSS 百分比宽度无效

CSS percentage width not working

html

css

navigation

width

percentage