控制::的尺寸::
问题描述:
我使用下面的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
元素占用的空间保持不变。任何想法如何解决这个问题,而不会下降? (由于兼容性,不能使用柔性盒)
答
出现的额外空白是由于伪元素在新行中形成了一个行框,并且垂直间距是划分为基线上方和下方的行。
如果您在父容器上设置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>
+1
这样做的工作。辉煌!先生非常感谢您! – 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>
什么是'目的:: after'在这种情况下? – cocoa
为什么不简单地为li元素添加边距以在它们之间增加空间? https://jsfiddle.net/8nc8ft2x/ – Jesse
@cocoa - ':: after'创建第二行,这样'text-align:justify'规则将平均分配第一行的元素。这是一个间距黑客。 – j08691