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

Question

当文本很长时，复选框会在文本上方。如何让它与文本保持同一行，但如果文本长，则会中断文本？即给出文本white-space:normal，但保持复选框和文本的第一位在同一行。

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

Answer 1

我已修改标记以使用label和input，但这不是必需的（您只需要包含复选框的内容。请查看this 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上的宽度就是为了表明这在文本换行时会起作用：它可以在任何宽度下工作，也可以在没有任何修复的情况下进行响应式设计。它看起来像这样：

这里是an example使用您的原始标记（添加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

我会为a设置固定宽度。

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

Answer 4

你可以试试 女巫是非易碎空间。