html - 使 block 元素位于短元素的右侧

Question

我有一个带有复选框的小表单，其中每个复选框都位于其描述文本的左侧。

如果描述文本换行，我希望下一行保留在复选框的右侧，并且我不希望整个描述容器本身重新定位到复选框下方。

我不想要这个:

我不想这样:

我想要这个! (原谅我微弱的图片编辑能力):

我已经尝试了十几种 display/float 组合的排列组合，但我就是做不到。

下面是我的来源，here is my JSFiddle.

div.outer {
    border: 1px green solid;
    width: 100px;
}

span.check {
    border: 1px orange solid;
}

span.desc {
    border: 1px cyan solid;
}

<div class="outer">
    <span class="check">
        <input type="checkbox" />
    </span>
    <span class="desc">Futures</span>
    <br/>

    <span class="check">
        <input type="checkbox"/>
    </span>
    <span class="desc">I don't currently trade</span>
    <br/>
</div>

Again, here's that JSFiddle link.

有人可以给我线索吗？我很难过。看来这不应该这么难。

enter link description here

Answer 1

我能想到的最好办法是给 desc 类一个固定的宽度，然后再添加 vertical-align: top。宽度防止 desc 太宽而导致自动换行。

span.desc {
    border: 1px cyan solid;
    display: inline-block;
    width: 90px;              // added
    vertical-align: top;      // added
}

我不喜欢添加固定宽度，但我现在想不出更好的办法。我仍然愿意接受更好的答案。

(See JSFiddle)