0

ラジオボタンについて質問です。以下にhtmlコードとcssコードがありますが、2つのラジオボタンがあり、各ラジオボタンの横にテキストがあります。最初のラジオ ボタンには「Male」と表示され、もう 1 つのラジオ ボタンには「Female」と表示されます。

今はラジオボタンの横に「男性」が表示されていて問題ありませんが、ラジオボタンの下に「女性」が表示されています。ラジオ ボタンとテキスト全体を格納するテーブルの幅を広くすると、「男性」と「女性」の両方がラジオ ボタンの下に表示され、横には表示されません。

私の質問は、ラジオ ボタンの横に「男性」と「女性」を表示するために、css/html コードで何を変更する必要があるかということです。

以下はhtmlコードです：

<table id="replies">
<tr>
     <th colspan="2">
     Replies
     </th>
</tr>
<tr>
<td>Gender: </td>
<td align="left">
<div class="replytd"> 
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span>
</div>
<div class="replytd"> 
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>
</div>
</td>
</tr>
</table>

以下はcssコードです：

#replies{
    display:inline-block;
    vertical-align:top;
    min-width:15%;
    max-width:15%;
}

#replies th{
    border-collapse:collapse;
    border:1px solid black; 
}

#replies td{
    border-collapse:collapse;
    border:1px solid black; 
    padding:1%;
}
4

4 に答える 4

2

<label>タグの代わりに<label>タグを使用します。アクセスしやすく、要素<span>との相関関係が優れているからです。<input>

于 2012-05-28T01:01:40.623 に答える
1

これをCSSコードに追加して、「div」に関する表示モードを変更できます

.replytd
{
float:left;
}
于 2012-05-28T01:05:29.037 に答える
0

コンテンツを収容するのに十分でないものを設定max-width:15%;して、コンテンツがラップし始めるようにします。を増やすか、または削除しmax-widthます。

于 2012-05-28T01:10:00.210 に答える
0

white-space:nowrap 列幅を設定するだけで機能することを考えると、役に立ちますが、少しやり過ぎになる可能性があります

悲しいことに、より正しいアプローチは<label>、スクリーンリーダーなどによって正しく認識され、そのセマンティックな目的を果たす要素を使用することです。ラベル要素はfor、親である場合、暗黙的に (属性なしで) 入力にリンクできます。

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>
于 2012-05-28T01:05:34.543 に答える