asp.net radiobuttonlist의 항목 사이에 공간을 추가하려면 어떻게합니까?

StackOverflow https://stackoverflow.com/questions/1822122

문제

ASP.NET RadioButtonlist가 있습니다. 반복 방향 = "가로" 한 줄에 표시합니다. 사용 중입니다 repeatlayout = "flow" 테이블의 마크 업을 피하기 위해. 그러나 이로 인해 목록의 항목이 서로 바로 옆에 배치되므로 좋아 보이지 않습니다.

그래서 나는 테이블 레이아웃을 시도하여 셀 스페이스 및/또는 셀 패딩 속성. 불행히도, 이러한 특성은 테이블 내에서 수직 및 수평 간격/패딩에 영향을 미치므로 수평 간격을 얻는 동안 바람직하지 않은 수직 간격도 얻습니다.

이 시점에서 나는 이것에 달려 있습니다.

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

... 나에게 비명을 지르고 있습니다. "당신은 제대로하고 있지 않습니다!"

이것을 달성하는 올바른 방법은 무엇입니까?

도움이 되었습니까?

해결책

CSS를 사용하여 특정 요소에 올바른 여백을 추가하십시오. 일반적으로 컨트롤을 구축 한 다음 결과 HTML 구조의 모습을 확인한 다음 CSS가 해당 요소 만 변경하게합니다.

바람직하게는 수업을 설정 하여이 작업을 수행합니다. 추가 CssClass="myrblclass" 목록 선언에 귀속됩니다.

프로그래밍 방식으로 항목에 속성을 추가 할 수도 있습니다.

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

마지막 속성을 제외한 모든 속성을 추가 할 수 있기 때문에 이것은 더 나을 수 있습니다.

다른 팁

나는 이것이 오래된 질문이라는 것을 알고 있지만 나는 그것을 좋아했다 :

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

이것을 수업으로 사용하십시오.

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

더 쉽게 ...

asp.net

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

CSS

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

반복 레이아웃이 테이블 인 경우 셀 스페이스 및 셀 패드딩 특성을 사용할 수도 있습니다. 

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

<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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top