كيف يمكنني إضافة مسافة بين العناصر في ASP.NET RadioButtonList

Question

لدي ASP.NET RadioButtonList التي تعرض أربعة عناصر باستخدام RepeatDirection="الأفقي" لعرضها على خط واحد.أنا باستخدام RepeatLayout="تدفق" تجنب العلامات على الطاولة.ومع ذلك ، فإن هذا يسبب البنود في قائمة توضع بجوار بعضها البعض ، والتي لا تبدو جيدة.

لذا حاولت تخطيط الجدول للاستفادة من 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>

...الذي يصرخ في وجهي "أنت لا تفعل ذلك الحق!"

ما هو الطريق الصحيح لتحقيق هذا الهدف ؟

Answer 1

استخدام css لإضافة الهامش الأيمن إلى تلك العناصر.عموما أنا سوف بناء التحكم ، ثم تشغيله لمعرفة ما نتج عن ذلك من هيكل html مثل ، ثم جعل css تغيير فقط تلك العناصر.

ويفضل يمكنك القيام بذلك عن طريق وضع الدرجة.إضافة CssClass="myrblclass" السمة إلى قائمة الإعلان.

يمكنك أيضا إضافة سمات إلى العناصر برمجيا ، والتي سوف تأتي من الجانب الآخر.

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

هذا قد يكون أفضل بالنسبة لك حيث يمكنك إضافة هذه السمة للجميع ولكن آخر واحد.

Answer 2

أعرف أن هذا هو مسألة قديمة ولكن أنا فعلت هذا مثل:

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

استخدام هذه الفئة الخاصة بك:

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

Answer 3

أسهل...

ASP.NET

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

CSS

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

Answer 4

يمكنك أيضا استخدام cellspacing و cellpadding خصائص إذا كرر تخطيط الجدول.

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">

Answer 5

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