我的輸入卡上有一些文本，並且其中包含一些文本。當文本較長它包裝的複選框防止文本在輸入字段下打包
Codepen下：http://codepen.io/padmacnu/pen/bpKOVB
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox</span>
</div>你可以做這樣的：http://codepen.io/dirtysmith/pen/QNxzGM
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input{
width:20px;
position:relative;
left: 0px;
vertical-align:middle;
}
span{
width:200px;
position:relative;
left: 0px;
display:inline-block;
vertical-align:middle;
}
+1對於向後兼容的解決方案... flex是CSS的一個很酷的部分，但對於舊版瀏覽器來說並不好。 –
您可以浮動輸入，使span它建立一個塊格式化上下文塊。
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input {
float: left;
}
span {
display: block;
overflow: hidden; /* Establish BFC */
}<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>或者，你可以使用Flexbox的：
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
display: flex;
}
span {
flex: 1; /* Fill remaining space left by the input */
}<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>感謝會員快速有益的迴應:) –
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input {
float: left;
}<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox</span>
</div>
您是否嘗試過的空白：NOWRAP; –
你想要文本去哪裏？該div對於文本數量不夠大。 –
'display：flex;'你的div將把它們放在同一行 – Uzi