Question

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

<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，但似乎无济于事。

Answer 1

在标签内输入内容，并考虑使用namespace SomeNamespace { using System; public class MyClass { static int ErrorCounter; public static void LogMethod(string level) { if (level == LogLevel.Error.ToString()) ++ErrorCounter; } } }。

^{我使用相同的ID /名称进行快速复制并简单地演示了窍门}

white-space:nowrap

label {
  white-space:nowrap;
}

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>

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

2 个答案: