2

フォームを作成していて、スペースを節約するためにフロートを使用して水平に表示される一連のラジオ ボタンがあります。しかし、後でフロートをクリアできず、ラジオの下のヘディングがラジオのすぐ横になってしまいます。

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

出力は次のようになります (アスタリスクはラジオ ボタンを表します)。

Would you like to subscribe to our newsletter?

Yes * No * Questions or Comments
4

4 に答える 4

1 
h2 {clear:both;}

上記を試してみたところ、うまくいくようでした。

于 2012-10-12T18:30:13.170 に答える
1

Choice div の clear left によるサンプルで試してみました。.choice以下のようにスタイルを変更し、

CSS:

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

サンプルを確認してください。これは役に立ちます。

于 2012-10-12T06:08:58.580 に答える
0

このスタイルコードを使用します

.choice ul li {clear:both}
于 2012-10-13T06:52:07.267 に答える
0

これが明確なコードです。

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-02T14:55:49.780 に答える