Question

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

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

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

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

相关代码（转换后）：

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

将{ // on a thread other than main() thread while(1) { //do something sleep(1); } }添加到width: 100%;。

请在此处查看：https://jsfiddle.net/vjhz7o8y/5/。

另外，请避免对多个元素使用相同的ul#menu，而是使用id。

class

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百分比宽度不起作用

2 个答案: