35

我的页面上有一些电台列表。我面临的问题是单选按钮的文本没有显示在单选按钮的内联。我已将 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 在桌子上时：

在此处输入图像描述

当 repeatLayout 在 Flow 上时：

在此处输入图像描述

有人可以帮助我如何设置它，以便文本显示在单选按钮旁边......如果它有所不同，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>
4

3 回答 3

45

检查 Aroon Soraali 建议的解决方案：

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>
于 2014-05-06T13:33:25.597 回答
19

试试这个：

.radioButtonList label{
    display:inline;
}

对我有用，但如果它不适合你，那么你可以试试这个解决方案 http://forums.asp.net/t/1089664.aspx/1

他将输入和标签显示为块并浮动。

于 2013-07-16T07:46:00.840 回答
2

如果您将 ASP.NET 复选框列表或单选按钮列表添加到具有“RepeatLayout=Flow”的页面，它会生成一个无样式的“span”标签，其中包含一系列“input”和“label”标签（对于每个“ListItem”）。

对于 Bootstrap 4，最简单的解决方案似乎是将自定义类添加到列表中，并为该类的“输入”和“标签”元素添加一些 CSS。请注意，您只需要删除任何 ASP.NET 生成的格式的“RepeatLayout=Flow”。

例如以下 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>

于 2019-02-17T22:37:16.380 回答