尽管块中有空格，为什么在连续块之间发生换行？

Question

假设您要创建一个带有输入标签的表单，并希望通过在每行上显示尽可能多的输入及其标签来使其以某种方式响应。为了做到这一点，我想到了自动 space 包装： 标签和输入之间没有 space，但是每个组之间 space。

<body>
    <form>
        <label for="aa">AA</label><input type="text" name="aa" id="aa" />
        <label for="bb">BB</label><input type="text" name="bb" id="bb" />
        <label for="cc">CC</label><input type="text" name="cc" id="cc" />
        <label for="dd">DD</label><input type="text" name="dd" id="dd" />
        <label for="ee">EE</label><input type="text" name="ee" id="ee" />
        <label for="ff">FF</label><input type="text" name="ff" id="ff" />
    </form>
</body>

可以看到，由于换行，label+input的每个"group"之间有一个space。但这似乎不适用于自动换行，因为换行似乎几乎总是在输入和标签之间完成。我想要的是在 space 处换行，而不是在标签和输入之间换行！

我做错了什么？虽然我知道将每个组包装在另一个项目中是可行的，但我希望我的代码尽可能简洁。我尝试了一些CSS，但没能安排好。

在此先感谢您的帮助！

Answer 1

没有任何额外标记的简单方法是使用 float 和 clear。

label,
input {
    float: left;
}

label {
    clear: left;
}

Demo

Answer 2

div { display:inline-block; }

<body>
    <form>
       <div> <label for="aa">AA</label><input type="text" name="aa" id="aa" /></div>
        <div>  <label for="bb">BB</label><input type="text" name="bb" id="bb" /> </div>
        <div>  <label for="cc">CC</label><input type="text" name="cc" id="cc" /> </div>
        <div>  <label for="dd">DD</label><input type="text" name="dd" id="dd" /> </div>
       <div>   <label for="ee">EE</label><input type="text" name="ee" id="ee" /> </div>
       <div>   <label for="ff">FF</label><input type="text" name="ff" id="ff" />  </div> 
    </form>
</body>

<!-- begin snippet: js hide: false -->

并使用 css 做 div { display:inline-block; } 或 div { float:left; }

Answer 3

OP 希望元素 label+input 包装为一个元素，即使它们不是。所以在调整 window 大小时，不需要将标签和输入分开成单独的行。如果不将它们包装在另一个元素中，我不知道如何做到这一点，例如： https://jsfiddle.net/goscuon5/

div { display: inline-block; }

或者您可以使用默认属性显示的元素：内联块；

否则我认为不可能。

Answer 4

实际上，这可以通过将输入标签包装在标签内并向标签添加 CSS 规则来实现：

label{
  white-space:nowrap;
  }

<body>
    <form>
        <label for="aa">AA<input type="text" name="aa" id="aa" /></label>
        <label for="bb">BB<input type="text" name="bb" id="bb" /></label>
        <label for="cc">CC<input type="text" name="cc" id="cc" /></label>
        <label for="dd">DD<input type="text" name="dd" id="dd" /></label>
        <label for="ee">EE<input type="text" name="ee" id="ee" /></label>
        <label for="ff">FF<input type="text" name="ff" id="ff" /></label>
    </form>
</body>

尽管块中有空格，为什么在连续块之间发生换行？

Why is wrapping happening between consecutive blocks despite spaces in the block?

html

css

word-wrap