为什么线条会在一种情况下破坏我的CSS而不是另一种呢？(见小提琴)

Question

​

​

这把小提琴和另一个版本的小提琴之间唯一的区别是，第二个</label><label for="address_zip" class="zip">在结束</label>标记后没有中断行。

​

​

<label for="address_state" class="state">
    <span>State</span><input name="address_state" type="text" placeholder="CA" required="" class="field is-empty">
</label><label for="address_zip" class="zip">
    <span>ZIP</span><input name="address_zip" type="text" placeholder="94107" required="" class="field is-empty">
</label> 

我以前也经历过类似的怪事。断线很棘手。

因此，我想“我会接受这样的事实: HTML在结束标签标签之后不会有新的行，尽管这看起来很草率。”

然而，，然后我注意到，我编写的 几乎相同的网页 (使用不同的CSS)似乎不受这个断行问题的影响。

​

​

为什么？

Answer 1

您的表单基本上是一行，因为没有像div这样的块部分。您向每个标签添加了一个display: flex，但没有添加到fieldset，因此每个标签都位于自己的行中。

当您在标签之间添加一条断线时，该断线将作为空格添加到HTML视图中，这使得它太长，无法适应一行。

下面是代码的外观：

<div>
  <label for="cardholder-name"> Name </label
  <input name="cardholder-name" type="text" placeholder="Jenny Rosen" class="question field is-empty personHead">
</div>

您可能需要重新做一些css来正确地对齐它，但这是正确的格式。