我有一组元素(每个都嵌套在相应的
中)。它们构建了一个面板堆栈,就像下面的图片一样。
如何实现这种行为?(我尝试插入空格,但可能有更好的解决方案)。
如何实现这种行为?(我尝试插入空格,但可能有更好的解决方案)。
这里提供一种简单而且健壮的解决方案:
span.item:empty:before {
content: "\200b"; // unicode zero width space character
}
(更新于2015年12月18日:不要再使用 \00a0
不间断空格,而是使用 \200b
,它也是一个不间断空格,但宽度为零。请看我的另一个答案:https://dev59.com/iGoy5IYBdhLWcg3wN7i8#29355130)
这个CSS选择器只选择那些“空”的 <span>
元素,并向其中注入一些内容,即一个不间断空格字符。因此,无论你设置了什么字体大小和行高,这个 <span>
周围的所有内容都会排列整齐,就像你在其中插入了文本一样,这可能正是你想要的。
http://plnkr.co/edit/eXHphA?p=preview
结果看起来像这样:
我认为使用 min-height
有两个问题:
当事情出了问题时,反例看起来像这样:
min-height
。你不能使用相同的类来支持网站的不同部分,其中字体大小是不同的。在这个例子中,此处的字体大小为 30,但 min-height
仍设置为 20。因此,空的 <span>
没有那么高。 :-(http://plnkr.co/edit/zeEvca?p=preview
min-height
,你的空的 <span>
元素具有正确的高度,但其与周围文本的对齐不正确。基线位置错误。请看下面这行写着“Huh?”的文本:http://plnkr.co/edit/GGd7mz?p=preview
最后一个例子的代码:
<div class="group">
Hello <span class="item">Text</span>
</div>
<div class="group">
Huh? <span class="item"></span>
</div>
<div class="group">
Yes! <span class="correct"></span>
</div>
CSS:
.group {
background-color: #f1f1f1;
padding: 5px;
font-size: 20px;
margin-bottom: 20px;
}
.item {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
min-height: 20px;
}
.correct {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
}
.correct:empty:before {
content: "\00a0";
}
你可以将span设置为display:inline-block;,然后添加min-height属性。
min-height
可能是一个适合快速解决问题的方法。我看到 min-height
存在两个可能的问题:字体大小和基线,对此我在下面提供了一个强大的解决方案。 - broc.seibdisplay:block
。如果没有,请添加此项。或者考虑使用div
替代。两个元素的区别在于,默认情况下是内联的,而div
则默认为块级元素,因此为什么不使用后者呢?min-height
设置为等于具有内容的项目的高度值。这通常由它们的行高确定。默认行高因字体(和浏览器)而异,因此要获得一致的结果,请明确设置行高,例如:* { line-height: 1.25; }
span { min-height: 1.25em; }
也许这个会起作用 -
span{
min-height:16px;
}
min-height
怎么样?我相信在ie6中会有问题,但其他所有浏览器都应该可以正常工作。 - Morpheus:empty
和:before
选择器来插入一个空格。所以你至少需要IE9来支持它。这个解决方案还修复了文本基线的问题,如果你的span周围有相邻的文本。 - broc.seib