web-dev-qa-db-ja.com

ラジオボタンリストをインラインで表示

私のページにはいくつかのラジオリストがあります。私が直面している問題は、ラジオボタンのテキストがラジオボタンのインラインで表示されないことです。 repeatLayoutをTableとFlowに配置しましたが、どちらも機能していません。 display：inlineのスタイルを追加しようとしました。しかし、それも機能しません（チェックボックスでは機能しましたが、おそらくここでも機能すると思いました）。

これは単なる通常のラジオリストです。

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

ul.radioButtonList { list-style:none; margin: 0; padding: 0;}
ul.radioButtonList.horizontal li { display: inline;}

RepeatLayoutがテーブル上にある場合：

enter image description here

そして、repeatLayoutがFlow上にある場合：

enter image description here

誰かがラジオボタンの横にテキストが表示されるように設定する方法を教えてもらえますか？違いがある場合は、radioButtonListがテーブルにあります。

溶液：

これが、ラジオボタンリストの外観です。

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

そして、これはcssClassです：

<style type="text/css">
    .radioButtonList { list-style:none; margin: 0; padding: 0;}
    .radioButtonList.horizontal li { display: inline;}

    .radioButtonList label{
        display:inline;
    }
</style>
asp.netcssradiobuttonlist
27
Kerieks

これを試して：

.radioButtonList label{
    display:inline;
}

私のために動作しますが、それがあなたのために動作しない場合は、このソリューションを試すことができます http://forums.asp.net/t/1089664.aspx/1

入力とラベルをブロックとして表示し、両方をフロートします。

15
prospector

Aroon Soraaliが提案するソリューションを確認してください：

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>
36
Nuno Ribeiro

「RepeatLayout = Flow」でASP.NETチェックリストまたはラジオボタンリストをページに追加すると、一連の「input」および「label」タグをラップするスタイル設定されていない「span」タグが生成されます（「ListItem」ごとに）。

Bootstrap 4の場合、最も簡単な解決策は、リストにカスタムクラスを追加し、そのクラスの「input」要素と「label」要素にCSSを追加することです。 = Flow」は、ASP.NETで生成されたフォーマットを取り除きます。

たとえば、次のRBL：

<asp:RadioButtonList runat="server" ID="rblContact" RepeatLayout="Flow"  CssClass="form-inline bootRBL">
  <asp:ListItem Value="0" Text="Email" Selected="True"  />
  <asp:ListItem Value="1" Text="Phone"  />
</asp:RadioButtonList>

カスタムクラス「bootRBL」を使用し、入力とラベルの間隔が正しい一連のインライン要素としてレンダリングします。

<style type="text/css">
    .bootRBL input {display:inline;margin-right:0.25em;}
    .bootRBL label {display:inline;margin-right:1em;}
</style>
<span id="rblContact" class="form-inline bootRBL">
                        <input id="rblContact_0" type="radio" name="rblContact" value="0" checked="checked" />
                        <label for="rblContact_0">Email</label>
                        <input id="CrblContact_1" type="radio" name="rblContact" value="1" />
                        <label for="rblContact_1">Phone</label>
</span>
2
dotnetnoob