CSS填充父项

Question

我试图做一个水平的导航栏，我已经坐在页面的顶部，三个列表项中的每一个填满了三分之一的空间，所有这一切都很好部分。

问题是，当我尝试使锚标记（它在列表项中）填满所有列表项的空间。我将它设置为display: block;，所以它占据了全部宽度，但是我无法让它填充垂直空间，我希望如何。我可以使用height: 100%，它会填满空间，但是如果我这样做，锚标记的文本将停留在列表项的空间顶部，但是我希望它是垂直居中的。为此，我想到了顶部和底部填充，所以我尝试设置padding: 100%;。发生这种情况时，我再也看不到锚标签的文字了。通过用鼠标拖动空间，看起来标签占用的空间比列表项中的空间要多。

这是导航栏的与height: 100%;图像： 注：围绕每个部分中的红色线是我设置可见，以查看边界

边界

相关HTML代码如下：

<ul class="main_nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Test page</a></li> 
    <li><a href="#">Test page 2</a></li> 
</ul> 

相关的CSS代码如下：

body * { 
    font-family: Roboto sans-serif; 

    box-sizing: border-box; 

    border: solid 2px red; 
} 

header ul.main_nav { 
    background-color: gray; 
    color: #EBEBEB; 

    margin: 0px; 

    padding: 0px; 

    width: 100%; 
    height: 50px; 

    list-style-type: none; 
    list-style-position: inside; 

    overflow: hidden; 
} 

header ul.main_nav li { 
    text-align: center; 

    float: left; 

    width: calc(100%/3); 
    height: 100%; 
} 

header ul.main_nav li a { 
    display: block; 

    height: 100%; 

    text-decoration: none; 
} 

编辑：我宁愿不使用固定的尺寸来解决这个问题，因为我主要是喜欢能够编辑一个值（50像素为UL）来调整整个导航栏

Answer 1

，你可以做到这一点使用Flexbox的 ，

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    display: flex 
 
} 
 
ul.main_nav li { 
 
    flex: 1; 
 
    display: flex; 
 
    height:100%; 
 
} 
 
ul.main_nav li a { 
 
flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: yellow 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>

如果你将拥有一个在线只在你的菜单，哟可以使用line-height，见下文

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    overflow: hidden; 
 
    font-size: 0; 
 
} 
 
ul.main_nav li { 
 
    text-align: center; 
 
    width: calc(100%/3); 
 
    height: 100%; 
 
    display: inline-block; 
 
    font-size: 16px 
 
} 
 
ul.main_nav li a { 
 
    display: block; 
 
    height: inherit; 
 
    background: yellow; 
 
    text-decoration: none; 
 
    line-height: 32px /*this should be the same value has the parent height*/ 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>