web-dev-qa-db-ja.com

ASP.NET RadioButtonListのアイテム間にスペースを追加する方法

RepeatDirection = "Horizo​​ntal"を使用して4つのアイテムを表示するASP.NET RadioButtonListがあります。ライン。 RepeatLayout = "Flow"を使用して、テーブルのマークアップを回避しています。ただし、これにより、リスト内のアイテムが互いに隣り合って配置され、見栄えが悪くなります。

そのため、CellSpacingおよび/またはCellPaddingプロパティ。残念ながら、これらのプロパティはテーブル内の垂直方向と水平方向の間隔/パディングの両方に影響するため、水平方向の間隔を取得する一方で、望ましくない垂直方向の間隔も取得します。

この時点で、私はこれに取り組んでいます：

<asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" 
    RepeatDirection="Horizontal"
    RepeatLayout="Flow" >
    <asp:ListItem Selected="false" Text="Item One&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_1" />
    <asp:ListItem Selected="false" Text="Item Two&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_2" />
    <asp:ListItem Selected="false" Text="Item Three&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_3" />
    <asp:ListItem Selected="false" Text="Item Four&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_4" />
</asp:RadioButtonList>

...「あなたはそれを正しくやっていない！」

これを達成する正しい方法は何ですか？

asp.netformattingmarkupradiobuttonlist
28
JeffK

Cssを使用して、これらの特定の要素に右マージンを追加します。通常、コントロールを作成し、実行して、結果のhtml構造がどのようなものかを確認し、cssにこれらの要素のみを変更させます。

できれば、クラスを設定してこれを行ってください。 CssClass="myrblclass"属性をリスト宣言に。

また、属性をプログラムでアイテムに追加することもできますが、これは反対側に表示されます。

rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right:5px;")

これは、最後の属性を除くすべての属性を追加できるため、より良い場合があります。

15
Russell Steen

これは古い質問ですが、次のようにしました：

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl">

これをクラスとして使用します。

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}
37
Rubenisme

さらに簡単に...

ASP.NET

<asp:RadioButtonList runat="server" ID="MyRadioButtonList" RepeatDirection="Horizontal" CssClass="FormatRadioButtonList"> ...

CSS

.FormatRadioButtonList label
{
  margin-right: 15px;
}
17
John Doe

繰り返しレイアウトがテーブルの場合、cellspacingプロパティとcellpaddingプロパティを使用することもできます。

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">
6
DotNetUser
<asp:RadioButtonList ID="rbn" runat="server" RepeatLayout="Table" RepeatColumns="2"
                        Width="100%" >
                        <asp:ListItem Text="1"></asp:ListItem>
                        <asp:ListItem Text="2"></asp:ListItem>
                        <asp:ListItem Text="3"></asp:ListItem>
                        <asp:ListItem Text="4"></asp:ListItem>
                    </asp:RadioButtonList>
1
srinu