CSS Padding溢出父级

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;
}

编辑：我宁愿不使用固定大小来解决这个问题，因为我非常希望能够编辑单个值（ul为50px）来调整整个导航栏

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>