Question

我有一个高度为300px的div。我想在div中构建一个垂直导航栏。我想平均分配每个li以适应div。我使用的是height = auto，但它不起作用。我读了一些文章，他们建议将高度除以我所拥有的链接数量。我不知道这是否是正确的解决方案。任何人都可以帮忙吗???

<div id="menu"> <!--Menus starts here-->
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Stuff1</a></li>
                        <li><a href="#">Stuff2</a></li>
                        <li><a href="#">Stuff3</a></li>
                        <li><a href="#">Stuff4</a></li>
                    </ul>
                </div> <!--End of verrical menu here-->


/*the menu starts here*/
#menu{
    background-color: yellow;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;


}
#menu ul{
    width: 95%;
    height: 300px;
    background-color: purple;
    display: block;
    margin: 0;
    padding: 0;

}

#menu li{
list-style: none;
display: block;
width: 100%;
height: auto;

color:#fffafa;
font-family: helvetica;
font-size: 20px;
padding: 20px;
text-align: center;
border:2px solid black;
}

#menu li:hover{
    background-color: #ff4500;
    width: 90%;
}

#menu li{
    -webkit-transition:all .9s ease;
    -moz-transition:all .9s ease;
    -ms-transition:all .9s ease;
    transition:all .9s ease;
} /*end of the menu goes here*/

Answer 1

如果您使用5个项目，则应手动设置li的高度，例如;

li {
height: 20%;
}

Answer 2

这里是jquery如果你想在ul中有更多li标签，菜单将保持300px或你可以改变和菜单高度。在这里你可以看到：http://jsfiddle.net/j3TU3/

$(document).ready(function(){
    var a=+$("#menu").height();
    var c=$("li").length;
    var aa=(a/c)-4;
    $("li").css({"height":aa});
});

如何在div中安装垂直导航栏？

2 个答案: