如何避免两个内联元素之间的换行（换行）

Question

我想使用大量的带标签的复选框，因此它们不会像普通文本一样一个接一个地显示，而是像普通文本一样浮动。到目前为止，我尝试过以下方法：

Original Answer翻译成"最初的回答"

<input type='checkbox' name='one' id='one' value='one'/><label for='one'>one</label>
|| <input type='checkbox' name='two' id='two' value='two'/><label for='two'>two</label>
|| <input type='checkbox' name='three' id='three' value='three'/><label for='three'>three</label>
|| <input type='checkbox' name='four' id='four' value='four'/><label for='four'>four</label>
|| <input type='checkbox' name='five' id='five' value='five'/><label for='five'>five</label>

实际的复选框和标签数量要多得多，长度为三到四行，具体取决于浏览器窗口的大小。

不幸的是，根据浏览器窗口的大小，input（复选框）和label元素之间可能会出现换行，尽管它们之间没有空格。这看起来不好看，因为方框和下面的文本应该放在一起，而不应该分开成不同的行。

我试图将它们都装入一个span元素中，甚至使用了各种属性和CSS，但似乎没有什么帮助。

- Holger Jakobs

---

尝试分配 min-width。 - undefined

Answer 1

将输入框置于标签内并考虑使用white-space:nowrap属性。

^{我使用相同的ID/名称来快速复制并简单演示这个技巧。}

label {
  white-space:nowrap;
}

<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 
<label for='one'><input type='checkbox' name='one' id='one' value='one'/> one</label>
|| 

- Temani Afif

---

我曾尝试过同样的方法，但是将CSS放入标签元素的style属性中，但是没有起作用。不明白这里有什么区别。 - undefined

Answer 2

这不是特别优雅，但对你来说可行吗？

<input type='checkbox' name='one' id='one' value='one'/>&nbsp<label for='one'>one</label>
|| <input type='checkbox' name='two' id='two' value='two'/>&nbsp<label for='two'>two</label>
|| <input type='checkbox' name='three' id='three' value='three'/>&nbsp<label for='three'>three</label>
|| <input type='checkbox' name='four' id='four' value='four'/>&nbsp<label for='four'>four</label>
|| <input type='checkbox' name='five' id='five' value='five'/>&nbsp<label for='five'>five</label>

- Robby

---

不，nbsp只是将普通空格替换为不换行的空格。由于元素之间没有空格，所以没有任何可以替换的东西。 - undefined