控制::的尺寸::

我使用下面的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元素占用的空间保持不变。任何想法如何解决这个问题，而不会下降？（由于兼容性，不能使用柔性盒）

来源

2015-11-05 user2340243

什么是'目的:: after'在这种情况下？ – cocoa

为什么不简单地为li元素添加边距以在它们之间增加空间？ https://jsfiddle.net/8nc8ft2x/ – Jesse

@cocoa - ':: after'创建第二行，这样'text-align：justify'规则将平均分配第一行的元素。这是一个间距黑客。 – j08691

出现的额外空白是由于伪元素在新行中形成了一个行框，并且垂直间距是划分为基线上方和下方的行。

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

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

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

来源

2015-11-05 15:51:13

这样做的工作。辉煌！先生非常感谢您！ – user2340243

或者你可以只使用Flexbox的：

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

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

来源

2015-11-05 15:56:22

控制::的尺寸::

回答

相关问题