無法在水平列表後清除浮動

我正在創建一個窗體並使用浮動水平顯示一組單選按鈕以節省空間。然而，之後我無法清除浮標，除了它們之外，收音機下面的標題最終還是正確的。無法在水平列表後清除浮動

的HTML代碼如下：

<div class="choice"> 

<ul> 

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li> 
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li> 

</ul> 

</div> 

<h2>Questions or Comments</h2>

而我的CSS如下：

.choice ul li label {width: 30px;} 

.choice ul li {float:left;} 

.choice {clear:both;}

輸出看起來像這樣（在這裏代表單選按鈕asteriks）：

Would you like to subscribe to our newsletter? 

Yes * No * Questions or Comments

來源

2012-10-12 Jeffrey Thomas Dube

難道你想顯示在接下來的氫含量線..？ – sureshunivers

是的，我希望它在下一行。 –

h2 {clear:both;}

試過以上，它似乎工作。

來源

2012-10-12 18:30:13

我試過了sample左邊的選擇div。改變.choice風格像波紋管，

CSS：

.choice:after {content:"#"; visibility:hidden; clear:both;}

檢查sample這是對你有用。

來源

2012-10-12 06:08:58 sureshunivers

在Firefox和Opera中看起來不錯，但在IE中（我使用的是IE 9），h2仍然與單選按鈕位於同一行。 –

其他[解決方案]（http://tinkerbin.com/w7x8lTvx）正在使用celar：left到h2標籤。 – sureshunivers

您可以使用此代碼風格

.choice ul li {clear:both}

來源

2012-10-13 06:52:07

這裏是明確的代碼。

HTML：

<div class="choice"> 

<ul> 

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li> 
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li> 

</ul> 
    <div class="clear"></div> 
</div> 

<h2>Questions or Comments</h2>

CSS：

.choice ul li label {width: 30px;} 

.choice ul li {float:left;} 

.clear {clear:both;}

歡呼..............

來源

2012-11-02 14:55:49

無法在水平列表後清除浮動

回答

相關問題