使塊元素停留在短元素的右側

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