0

これらのラジオボタンを配置して、含まれているdivに並べて配置しようとしています。どうすればこれを達成できますか。

 <div class="form-field">
      @Html.Label("Gender")
      <span>Male @Html.RadioButton("gender", "Male")</span>
      <span>Female @Html.RadioButton("gender", "Female")</span>
      <span>Unkown @Html.RadioButton("gender", "Unknown")</span>
 </div>

出力は、互いにスタックされないようにインラインである必要があります。いえ8

4

4 に答える 4

1

div とその中にテーブルを作成しました。これにより、ラジオ ボタンをテーブル データの 1 つとして示すことができます。以下はそのサンプルコードです。試すことができます：

    <div>
    <table class="textfont" style="width:100%">
    <tr>
    <td>&nbsp;</td>
    <td><asp:RadioButton ID="" runat="server" Text="" AutoPostBack="True" /></td>
    <td><asp:RadioButton ID="" runat="server" Text="" AutoPostBack="True" /></td>
    </tr> 
    </table>
    </div>

問題があれば教えてください。

于 2012-09-14T13:53:23.587 に答える
0

私はC＃にあまり詳しくありませんが、CSSを使用すると非常に簡単です。

.form-field span { display:inline-block; margin-right:10px; }

これが私のJSFiddleの例です。

//編集

私はC＃に精通していないため、コードが最終的にこのようになるかどうかはわかりませんが、ラベルの前にラジオボタンを配置することをお勧めします。この場合、

     Ο男性     Ο女性     Ο不明

私が言ったように、私はC＃に精通していないので、少なくともUIについてアドバイスを提供したいと思いました:)

于 2012-09-14T14:01:39.887 に答える
0

I think people are over complicating the answer here. If you want a series of radio buttons lined up simply wrap your inputs in label elements:

<div class="form-field">
<label><input type="radio" name="lump">Lump</label>
<label><input type="radio" name="stump">Stump</label>
<label><input type="radio" name="bump">Bump</label>
</div>

This will line the radio buttons one next to the other. If you want them running straight up and down in your CSS add display:block to your label elements. This works down to IE7. And here's the relevant section of the HTML spec: http://dev.w3.org/html5/spec/single-page.html#the-label-element.

So for your code, this should work:

<div class="form-field">
      @Html.Label("Gender")
      <label>Male @Html.RadioButton("gender", "Male")</label>
      <label>Female @Html.RadioButton("gender", "Female")</label>
      <label>Unkown @Html.RadioButton("gender", "Unknown")</label>
 </div>

And the fiddle: http://jsfiddle.net/kdUAS/

于 2012-09-14T15:32:38.800 に答える
0

項目を横に並べた div にグループ化するか、2 番目の項目を揃えるためにスペースを追加する必要があります。

次のリンクが役に立ちます

ラジオボタンを上下に揃える

于 2012-09-14T13:43:34.960 に答える