Question

我正在制作导航栏，而我似乎无法让它变得更小，现在它看起来太厚了我想要的东西我尝试改变填充，边距等并且似乎无法让它变得有用。改变高度会使它变薄但链接不会随着div移动而不会垂直居中。这可能是一个简单的疏忽，但我没有看到它，并希望得到帮助！

HTML：

<nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="gallery.html">Gallery</a></li>
        </ul>
    </nav>

CSS：

body     {
background-color:#000;
color:#fff;
}


p       {
text-align:center;
}

img     {
display:block;
margin-left:auto;
margin-right:auto;
padding:10px;
}

nav     {
background-color:#808080;
display:inline-block;
text-align:center;
padding:0;
width:1000px;
list-style:none;
}


nav ul li        {
display:inline-block;
}

Answer 1

将此添加到您的css：

ul{
 margin:0;
}

PS。仅当您想减小菜单栏的厚度时（例如您提到的问题），这才有用。如果你想要一个更加格式化的导航，你将不得不在这里添加更多东西。

Answer 2

您应该使用ul和li的浮点数，边距和填充。赫拉是example

nav ul li {
    float:left;
    margin-right:10px;
    list-style:none;
}

无法使我的导航栏更小

2 个答案: