CSS 内联显示单选按钮列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17670479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display radiobuttonlist inline
提问by Kerieks
I've got a few radiolists on my page. The problem that I am facing is that the text of the radio buttons are not displayed inline of the radion button. I have put the repeatLayout to Table and Flow and neither is working. I have tried to add a style of display:inline; but that doesn't work either (though it did on the checkboxes and I thought that maybe it would work here too).
我的页面上有一些广播电台。我面临的问题是单选按钮的文本没有显示在单选按钮的内联。我已将 repeatLayout 放在 Table 和 Flow 中，但两者都不起作用。我试图添加一种样式 display:inline; 但这也不起作用（尽管它在复选框上起作用，我认为它可能也适用于此）。
This is just a normal radiolist:
这只是一个普通的电台列表：
<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;}
When the repeatLayout is on table:
当 repeatLayout 在桌子上时：
And when the repeatLayout is on Flow:
当 repeatLayout 在 Flow 上时：
Can Somebody please help me on how to set it so the text is displayed next to the radio button... If it makes a difference the radioButtonList is in a table....
有人可以帮助我如何设置它，以便文本显示在单选按钮旁边......如果它有所不同，radioButtonList 在表格中......
SOLUTION:
解决方案：
This is what the radio buttonlist look like now:
这就是单选按钮列表现在的样子：
<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>
And this is the cssClass:
这是 cssClass：
<style type="text/css">
.radioButtonList { list-style:none; margin: 0; padding: 0;}
.radioButtonList.horizontal li { display: inline;}
.radioButtonList label{
display:inline;
}
</style>
采纳答案by prospector
Try this:
尝试这个：
.radioButtonList label{
display:inline;
}
works for me, but if it doesn't work for you then you might try this solution http://forums.asp.net/t/1089664.aspx/1
对我有用，但如果它对你不起作用，那么你可以试试这个解决方案 http://forums.asp.net/t/1089664.aspx/1
He displays the input and label as block and floats both.
他将输入和标签显示为块并浮动两者。
回答by Nuno Ribeiro
Check the solution suggested by Aroon Soraali:
<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>
回答by dotnetnoob
If you add an ASP.NET checkboxlist or radiobuttonlist to a page with "RepeatLayout=Flow" it generates an unstyled "span" tag wrapping a series of "input" and "label" tags (for each "ListItem").
如果您将 ASP.NET 复选框列表或单选按钮列表添加到具有“RepeatLayout=Flow”的页面，它会生成一个无样式的“span”标签，其中包含一系列“input”和“label”标签（对于每个“ListItem”）。
For Bootstrap 4, the simplest solution seems to be to add a custom class to the list and add some CSS for that class's "input" and "label" elements. Note that you only need "RepeatLayout=Flow" which strips away any of the ASP.NET-generated formatting.
对于 Bootstrap 4，最简单的解决方案似乎是向列表中添加一个自定义类，并为该类的“输入”和“标签”元素添加一些 CSS。请注意，您只需要“RepeatLayout=Flow”即可去除任何 ASP.NET 生成的格式。
For example the following RBL:
例如以下 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>
uses the custom class "bootRBL" and renders as a series of inline elements with correct spacing between the input and labels.
使用自定义类“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>