html - 多行段落 CSS 前面的复选框

Question

我试图让复选框出现在段落开始之前，但如果文本太长，它们会出现在段落的底行。请注意，如果文本超过 div 的宽度，我希望文本换行。

HTML 示例:

<label>
    <div class='note_div'>
        <input type='checkbox'>
        <p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt nunc condimentum suscipit hendrerit. Duis blandit purus lacus, at adipiscing sapien volutpat in. Curabitur tristique nisi quis sem malesuada ultricies. Curabitur venenatis gravida ligula, vel molestie odio blandit ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec fermentum vel nulla id porttitor. Pellentesque quis molestie leo. Nunc quis ligula ultricies, hendrerit enim nec, elementum ante. Praesent quam erat, facilisis id dolor a, gravida varius ligula. Praesent placerat, ipsum in euismod consectetur, eros libero</p>
    </div>
</label>

CSS:

.note_div {
    width: 350px;
}

.note {
    width: 300px;
    word-wrap: break-word;
    display: inline-block;
    margin-top: 3px;
    margin-bottom: 3px;
}

这是 fiddle http://jsfiddle.net/3RfL8/

谢谢!

Answer 1

您可以使用 vertical-align :

.note {
    vertical-align: top;
}

Demo

或者，您也可以使用 floating而不是内联 block :

.note_div > input {
    float: left;
}
.note {
    overflow: hidden;
}

Demo