即使没有任何东西,也能保持跨度的宽度

Question

如果它是空的,可以以某种方式保持跨度的宽度吗？

我有以下HTML伪表:

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p>

使用CSS:

span.col1 {width: 100px;float: left;}
span.col2 {width: 100px;}

有时在col2中回显的PHP是空的,当发生这种情况时,col2的宽度为0,而下面段落上的col1最终会在上面段落中的col1旁边堆叠.

Answer 1

您的col2跨度忽略宽度,因为它们是内联元素.您需要使它们成为内联块元素.

span.col2 { width: 100px; display: inline-block }

另外请记住,您可能需要根据显示的位置为其添加高度,否则最终会得到100px宽但0px高的跨度.