来自父 div 的可变宽度的 CSS 水平菜单

Question

我正在尝试创建一个水平菜单，其宽度与父 div 的宽度相同，并且链接等距排列。目标是创建一个宽度为 900px 的导航栏。也许有可能以另一种方式实现它？我是 css 的新手，不知道如何解决我的问题，希望你能帮助我!

#nav {
background:red;
width:900px;
}

ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}

ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}

ul#nav-bar li:hover>*{
display:block;
}

ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}

ul#nav-bar li:hover{
z-index:1;
}

ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}

* html ul#nav-bar li a{
display:inline-block;
}

ul#nav-bar>li{
margin:0;
}

ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}

ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}

ul#nav-bar ul li{
float:none;
margin:0 0 0;
}

ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}

ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}

ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}

---

<div id="nav">
<ul id="nav-bar">
    <li><a href="#">Link1</a></li>
    <li><a href="#"><span>Link2</span></a>
        <ul>
            <li><a href="#">lowerLink1</a></li>
            <li><a href="#">lowerLink2</a></li>
            <li><a href="#">lowerLink3</a></li>
        </ul>
    </li>
    <li><a href="#">Link3</a></li>
    <li><a href="#"><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span></a>
        <ul>
            <li><a href="#">lowerLink1</a></li>
            <li><a href="#">lowerLink2</a></li>
            <li><a href="#">lowerLink3</a></li>
        </ul>
    </li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
    <li><a href="#">longxxxxxxxxxxxxxlink</a></li>
</ul>
</div>

谢谢!

Answer 1

要使#nav-bar 与父级匹配，只需将width:100% 添加到您现有的css 中的ul#nav-bar 标签中。这告诉您的 child 填写 parent ，无论 child 的内容如何。

至于展开链接，根据我的经验，最好的方法是在导航栏完成后为文本添加页边距。对于您的编码示例，我将添加以下内容以消除它们:

ul#nav-bar->li{
    margin:0px 20px 0px 20px;
    text-align:center;
}