使块元素保持在短元素的右侧

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

如果使标签相对，则可以通过绝对位置移动输入。如果您想对文本执行某些操作，则不需要跨度，但更容易：

.check{
    position: relative;
}
.check>input{
    position: absolute;
    top: 0;
    display: inline-block;
    left: -25px;
    width: 25px;
}

Answer 2

我能想出的最好的方法是为desc类提供固定的宽度，然后再添加vertical-align: top。宽度使desc宽度足以引起自动换行。

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

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

(See JSFiddle)

Answer 3

您要找的是display: inline-block

查看this fiddle，解决您的问题。

除此之外，我的建议是考虑修复复选框的宽度（或包含它的范围）。

Answer 4

选中此fiddle

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

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

span.desc {
  border: 1px cyan solid;
display: inline-block;
width: 60px;
vertical-align: top;
text-align: left;
}