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

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。

Answer 2

默认情况下，span显示为内联。

因此，要么添加display:block给它一个块元素，要么另外你可以使用display:inline-block使其与文本的其余部分保持内联（不使用float）。

Answer 3

默认情况下，span元素是内联元素，它忽略宽度。

尝试将display：block添加到您的跨度中。

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

希望它有所帮助。