html - 如何确保复选框旁边的文本永远不会出现在复选框下方？

Question

当文本很长时，复选框位于文本上方。我怎样才能使它与文本保持在同一行但如果文本很长则打破文本？即给出文本white-space:normal，但将复选框和文本的第一位保持在同一行。

 <input style="float: left" type="checkbox" ...etc..> <a href="...">my text</a>

Answer 1

我已将标记修改为使用labeland input，但这不是必需的（您只需要一些东西来包含您的复选框。看看这个 jsFiddle的例子。

HTML：

<div class="container">
     <label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>

CSS：

.container {
    width: 150px;
    background: red;
}

label {
    display: block;
    padding-left: 1em;
}

input {
    display: inline-block;
    margin-left: -1em;
}

上的宽度.container只是表明这将在文本换行时起作用：它可以在任何宽度下工作，并且适用于没有任何固定的响应式设计。它看起来像这样：

这是一个使用原始标记的示例（添加了span，我假设您可以包含该标记）：

<div class="container">
    <span><input type="checkbox"> <a href="#">My text - this label can be as long as you want it to be, see?</a></span>
</div>

Answer 2

更新：其他可能对您有用的东西：

http://jsfiddle.net/persianturtle/FrEsX/3/

隐藏是溢出。

像这样的东西？

http://jsfiddle.net/persianturtle/vwfwh/3/

如果没有，请画一幅画。

.container {
width: 150px;
height: 200px
}

input {
margin: 25px 25px 50px 50px;
float: left;
}

Answer 3

你可以试试 witch is for Non Breakable Space。

Answer 4

好吧，我会为 a 设置固定宽度。

a {
  display: inline-block;
  width: 100px; /*whatever number you need*/
}