使块元素停留在短元素的右侧

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)

Answer 2

如果你做相对的标签，你可以通过绝对位置移动输入。

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

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; 
}