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

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>