我有这个 HTML 布局:
<p>foo</p><p>bar</p>
<p>foo2</p><p>bar2</p>
<p></p><p></p>
<p>foo4</p><p>bar4</p>
<p></p><p></p>
样式为:
p{display:inline-block; width:50%;margin:0;}
p:nth-child(even){text-align:left;background:red;}
p:nth-child(odd){text-align:right;background:blue;}
问题是空元素占用空间。是否有可能(仅使用 CSS)防止空元素占用垂直空间?
最佳答案
使用 :empty
pseudo class隐藏空元素:
p:empty {
display: none;
}
p {
display: inline-block;
width: 50%;
margin: 0;
}
p:nth-child(even) {
text-align: left;
background: red;
}
p:nth-child(odd) {
text-align: right;
background: blue;
}
p:empty {
display: none;
}
<p>foo</p><p>bar</p>
<p>foo2</p><p>bar2</p>
<p></p><p></p>
<p>foo4</p><p>bar4</p>
<p></p><p></p>
关于html - 不要使用 CSS 显示空的内联 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34228878/