控制::

Question

我使用下面的CSS创建了一个导航，以实现导航元素之间的相等距离​​。但是，我遇到了一个问题，其中:: after元素在列表区域下方创建了空白空间，我似乎无法调整其高度。

看到这张图片：

使用浪费的空间呈现列表

ul.formnav {
  padding: 0px 8%;
  justify-content: space-between;
  text-align: justify;
}
ul.formnav::after {
  background-color: red;
  content: 'This is wasted Space';
  display: inline-block;
  width: 100%;
  height
}
ul.formnav li {
  display: inline-block;
  color: #FFF;
  background-color: #999; /*Circle Formatting*/
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

<div>
  <ul class="formnav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

我可以自己调整内容，例如我可以设置height:0px，红色背景将消失或只设置content:'';，但::after元素占用的空间保持不变。知道如何解决这个问题而不放弃display:inline-block吗？ （由于兼容性，不能使用flexbox）

Answer 1

出现的额外空白是由于伪元素在新行中形成一个线框，而垂直间距是在基线上下分开的行。

如果在父容器上设置line-height: 0，然后在伪元素上设置vertical-align: top，则会将空白区域缩小到零高度。

＆＃13;

＆＃13;

ul.formnav {
  padding: 0px 8%;
  justify-content: space-between;
  text-align: justify;
  border: 1px dotted blue; /* demo only */
  line-height: 0;
}
ul.formnav::after {
  content: '';
  display: inline-block;
  width: 100%;
  vertical-align: top; /* gets rid of space below the baseline */
}
ul.formnav li {
  display: inline-block;
  color: #FFF;
  background-color: #999; /*Circle Formatting*/
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

＆＃13;

<div>
  <ul class="formnav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

或者你可以使用flexbox：

＆＃13;

＆＃13;

ul.formnav {
  padding: 0px;
  display: flex;
  justify-content: space-between;
  border: 1px solid grey;
}
ul.formnav li {
  color: #FFF;
  background-color: #999;
  /*Circle Formatting*/
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

＆＃13;

<div>
  <ul class="formnav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;