用CSS嵌入塊和文本環繞

我想顯示一個複選框，後面跟着一些文本，它包圍在它下面。沒有任何CSS的HTML如下所示：用CSS嵌入塊和文本環繞

<input type="checkbox" checked="checked" /> 
<div>Long text description here</div>

我希望它顯示類似：

X Long Text 
    Description 
    Here

目前，它環繞像這樣

X Long Text 
Description Here

這是容易做到表格，但我需要它在CSS中出於其他原因。我認爲顯示的組合：inline-block/float：right/clear/span代替DIVs可以工作，但我迄今還沒有運氣。

來源

2010-02-11 geographika

裹複選框和標籤在容器股利（或鋰 - 我做的形式與清單常常），並應用

<div class="checkbox"> 
    <input type="checkbox" id="agree" /> 
    <label for="agree">I agree with checkbox</label> 
</div> 




.checkbox input { 
     float:left; 
     display:block; 
     margin:3px 3px 0 0; 
     padding:0; 
     width:13px; 
     height:13px; 
    } 

.checkbox label { 
     float:left; 
     display:block; 
     width:auto; 
    }

來源

2010-02-11 09:14:17 easwee

HTML是類似項目列表的一部分，所以這種方法運作良好。我添加了一個清晰的：left;對於每個列表項或項目開始錯開，但我沒有使用顯示：塊 – geographika 2010-02-11 10:08:48

你能提供一個這個工作的例子嗎？據我所知，這並沒有達到預期的效果（我在複選框下面看到了很長的一行）：http://jsfiddle.net/h8uKN/ – Chris 2013-07-23 11:04:44

Chris對不起，但是提供的解決方案並沒有實現， t在鉻工作，並不是一個真正的解決方案。 – 2013-09-10 06:30:39

試試這個：

input { float: left; } 
div { margin-left: 40px; }

調諧margin-left多少空間你要。複選框上的float: left基本上將其從塊佈局中取出，因此它不會下推文本。

來源

2010-02-11 09:15:12 cletus

感謝您對實際做的事情的簡潔描述。這種方法也起作用。 – geographika 2010-02-11 10:06:39

用CSS嵌入塊和文本環繞

回答

相關問題