为什么换行会在一个案例中弄乱我的CSS而不是另一个案例？ （见小提琴）

Question

this fiddle和this other version of the fiddle之间的唯一区别是第二个</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> 

我之前经历过类似的怪异。换行很棘手。

所以，我认为＆＃34;我会接受这样一个事实，即HTML在结束标签标签之后不会有新行，即使看起来很草率。＆＃34;

然而，我注意到nearly identical webpage我编码的（只有不同​​的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才能正确对齐它，但这是正确的格式。