RadioButtonList
是一個用于在 Web 表單中顯示一組單選按鈕的控件。它可以呈現多種布局方式,以下是一些常見的布局方式:
RadioButtonList
的默認布局方式。<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
.horizontal-layout {
display: inline-block;
margin-right: 10px;
}
</style>
<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
<asp:ListItem Text="Option 1" Value="1" class="horizontal-layout"></asp:ListItem>
<asp:ListItem Text="Option 2" Value="2" class="horizontal-layout"></asp:ListItem>
<asp:ListItem Text="Option 3" Value="3" class="horizontal-layout"></asp:ListItem>
</asp:RadioButtonList>
RepeatLayout
屬性為 Table
。<asp:RadioButtonList ID="RadioButtonList3" runat="server" RepeatLayout="Table" RepeatColumns="2">
<asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
<asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
</asp:RadioButtonList>
RepeatLayout
屬性為 Flow
并結合 CSS 樣式來實現更復雜的布局。 .custom-layout {
display: flex;
flex-wrap: wrap;
}
.custom-item {
margin-right: 10px;
margin-bottom: 5px;
}
</style>
<asp:RadioButtonList ID="RadioButtonList4" runat="server" RepeatLayout="Flow" CssClass="custom-layout">
<asp:ListItem Text="Option 1" Value="1" class="custom-item"></asp:ListItem>
<asp:ListItem Text="Option 2" Value="2" class="custom-item"></asp:ListItem>
<asp:ListItem Text="Option 3" Value="3" class="custom-item"></asp:ListItem>
<asp:ListItem Text="Option 4" Value="4" class="custom-item"></asp:ListItem>
</asp:RadioButtonList>
這些布局方式僅供參考,你可以根據需要進行調整和優化。