显示radiobuttonlist内联

Question

我的页面上有一些放射学家。我面临的问题是单选按钮的文本没有显示在内部的辐射按钮上。我已将repeatLayout放到Table和Flow中，但两者都没有工作。我试图添加一种显示风格：内联;但这也不起作用（虽然它在复选框上做了，我想也许它也可以在这里工作）。

这只是一名普通的放射学家：

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

Answer 1

Check the solution suggested by Aroon Soraali:

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>

Answer 2

试试这个：

.radioButtonList label{
    display:inline;
}

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

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

Answer 3

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

对于Bootstrap 4，最简单的解决方案似乎是在列表中添加一个自定义类，并为该类的“ input”和“ label”元素添加一些CSS。请注意，您只需要“ RepeatLayout = Flow”即可剥离ASP.NET生成的任何格式。

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