复选框前面的多行段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;
}

这是小提琴http://jsfiddle.net/3RfL8/

谢谢！

Answer 1

您可以使用vertical-align：

.note {
    vertical-align: top;
}

Demo

或者，您也可以使用floating代替内联块：

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

Demo