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

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 }

另外请记住，您可能需要根据显示的位置为其添加高度，否则您最终会得到一个 100 像素宽但 0 像素高的跨度。

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;}

希望能帮助到你。