html - 无法让我的导航栏变小

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

你应该为 and 使用浮动、边距和ul填充li。赫拉就是一个例子

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