1

我正在尝试创建一个具有父 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>

谢谢！

4

2 回答 2

0

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

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

ul#nav-bar->li{
    margin:0px 20px 0px 20px;
    text-align:center;
}
于 2013-08-12T21:45:12.923 回答
0

你可以在这里查看，这里是css代码

/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

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

#nav ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav li{
    position: relative;
    text-align: center;
    padding: 10px 0px;
}

#nav a{
    text-decoration: none;
    display: block;
    color: #f0f0f0;
}

#nav-bar > li{
    float: left;
}

#nav-bar ul{
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    background: #999;
    display: none;
}

#nav-bar li:hover{
    background: #666;
}

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

好像您希望将宽度调整为 li 元素中的文本宽度，所以您需要 javascript，这是我更新了 jsfiddle的代码

$(document).ready(function(){


    total_nav_width     = $('#nav').width();
    main_link           = $('#nav-bar > li > a')
    textWidths          = [];
    totalTextWidth      = 0;

    main_link.each(function(){
        textWidths.push($(this).width())
    })


    for (var i = 0; i < textWidths.length; i++) {
        totalTextWidth += textWidths[i];
    }

    additionValues = (total_nav_width - totalTextWidth)/main_link.length;

   main_link).each(function(){
        intialWidth = $(this).width()
        $(this).width( intialWidth + additionValues )
   })


})
于 2013-08-12T22:10:26.243 回答