CSS 如何使 ASP CheckBoxList 标签与复选框保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7968175/
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
How to make ASP CheckBoxList labels stay on same line as checkbox
提问by Purplegoldfish
This may be a common problem but I'm struggling to find a solution that will fix it
这可能是一个常见问题，但我正在努力寻找解决方案
I have a modal popup I am displaying with jQuery, this popup contains a list of Checkboxes and a Button, the code looks like:
我有一个用 jQuery 显示的模式弹出窗口，这个弹出窗口包含一个复选框列表和一个按钮，代码如下：
<div id="dialog" title="Notify Users" >
<div style="width:100%; height:500px; overflow:auto;">
<asp:CheckBoxList ID="chkNotify"
runat="server"
CssClass="checkboxlist_nowrap"
RepeatLayout="Table"
/>
</div>
<asp:Button ID="btnSaveNotifications"
runat="server"
Text="Ok"
/>
</div>
The popup displays correctly however the labels for each checkbox are on the line below the checkbox. I cant seem to figure out why this happens, at first I assumed that the divcontaining the CheckBoxListwas simply too small so I gave each diva fixed width, but that didn't help anything.
弹出窗口正确显示，但每个复选框的标签位于复选框下方的行上。我似乎无法弄清楚为什么会发生这种情况，起初我认为div包含的CheckBoxList太小了所以我给了每个div固定的宽度，但这没有任何帮助。
I have also tried applying this CSS
我也试过应用这个 CSS
.checkboxlist_nowrap tr td label
{
white-space:nowrap;
overflow:hidden;
width:100%;
}
It didnt help but im unsure about if the stylesheet actually was used even though I have:
它没有帮助，但我不确定是否真的使用了样式表，即使我有：
<link href="../css/HelpDesk.css" rel="stylesheet" type="text/css" />
in my head tags.
在我的头标签。
Can anyone suggest anything else I can try?
任何人都可以建议我可以尝试的其他任何东西吗？
Thanks
谢谢
UPDATE:Here is my Jquery:
更新：这是我的 Jquery：
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
width: 400,
hide: "explode"
});
And here is how I populate the CheckBoxList:
这是我填充的方式CheckBoxList：
Private Sub populateCheckBoxList()
Dim notificationList As DataTable
notificationList = dbGetNotificationsList(1)
For Each dr As DataRow In notificationList.Rows
Dim li As New ListItem
li.Text = dr("FullName")
li.Value = dr("ID")
If (dr("Checked") = 1) Then
li.Selected = True
Else
li.Selected = False
End If
chkNotify.Items.Add(li)
Next
End Sub
I have tried moving the CheckBoxList to just inside the form tag so that no other styles can be applied and nothing should affect it however I still get the same issue.
我尝试将 CheckBoxList 移动到表单标签内，这样就不能应用其他样式，也不会受到任何影响，但是我仍然遇到同样的问题。
采纳答案by Purplegoldfish
Marking this as closed as I never managed to figure it out and the issue has been passed to another dev. Will post the answer here when I get it back.
将其标记为已关闭，因为我从未设法弄清楚并且问题已传递给另一个开发人员。当我回来时会在这里发布答案。
I'd really appreciate people not down voting me for marking this as closed, I don't work at the company anymore, I have absolutely no way of recreating the issue or verifying any solutions people post and at the time I set this to closed none of the provided solutions fixed the problem.
我真的很感谢人们不要因为将我标记为关闭而投票给我，我不再在公司工作，我绝对无法重新创建问题或验证人们发布的任何解决方案，并且在我将其设置为关闭时提供的解决方案都没有解决问题。
回答by Sarvesh Gupta
For me none of the above solutions worked and so i looked up the exact HTML rendered and found that the label had the display property set to block. Changing it to inline worked:
对我来说，上述解决方案均无效，因此我查找了呈现的确切 HTML，发现标签的显示属性设置为阻止。将其更改为内联工作：
.checkboxlist_nowrap label
{
display:inline;
}
回答by tedski
I'm thinking it's a CSS problem... I couldn't reproduce the whitespace wrapping with what you posted. You might want to make sure the width of your dialog is set correctly in jQuery.
我认为这是一个 CSS 问题......我无法用您发布的内容重现空白包装。您可能希望确保在 jQuery 中正确设置对话框的宽度。
Something like:
就像是：
$("#dialog").dialog({
modal: true,
autoOpen: false,
draggable: false,
resizable: false,
width: 400,
buttons: {
Update: function () {
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
}
});
Also, a really great way to check CSS (and javascript) is using Google Chrome's Dev Tools. They're packaged with Chrome. All you have to do is right-click on the element you're having trouble with and hover over the HTML in the window. It'll tell you all the classes being applied to it and will show you the margins/width/everything. It has been infinitely helpful for me.
此外，检查 CSS（和 javascript）的一个非常好的方法是使用 Google Chrome 的开发工具。它们与 Chrome 一起打包。您所要做的就是右键单击遇到问题的元素并将鼠标悬停在窗口中的 HTML 上。它会告诉您应用到它的所有类，并会向您显示边距/宽度/所有内容。它对我有无限的帮助。
回答by John
I was having a similar problem. Found an answer on another stack overflow articlewhich I have pasted below.
我遇到了类似的问题。在我粘贴在下面的另一篇堆栈溢出文章中找到了答案。
You want to have display:inline applied to the element that ASP generates to hold the label text, not the control itself. So, for example:
您希望将 display:inline 应用于 ASP 生成的元素以保存标签文本，而不是控件本身。因此，例如：
<style type="text/css">
label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />
回答by Steven Gregory
Using an ASP.NET checkbox control, I had the same problem with an unwanted linefeed between a checkbox and its label. I believe the problem reared its ugly head because this section of code was wrapped in a class that applied a {display: block} style. I solved the problem by first adding a CssClass attribute to the checkbox:
使用 ASP.NET 复选框控件时，我遇到了与复选框及其标签之间不需要的换行符相同的问题。我相信这个问题引起了它的丑陋，因为这部分代码被包装在一个应用了 {display: block} 样式的类中。我通过首先向复选框添加一个 CssClass 属性来解决这个问题：
<asp:Repeater
ID="UserRoleList"
runat="server">
<Itemtemplate>
<asp:CheckBox
ID="RoleCheckBox"
CssClass="sameLine"
AutoPostBack="true"
Text='<%# Container.DataItem %>'
runat="server" />
<br />
</ItemTemplate>
</asp:Repeater>
Looking at the rendered html in the browser by viewing the source I saw that the style added a span and that the asp.net checkbox control was rendered within the span as an input tag and a label. I tried applying my style to just the span alone but it didn't work nor did applying the style to the input tag. What worked for me was applying the style to the label:
通过查看源代码查看浏览器中呈现的 html，我看到样式添加了一个跨度，并且 asp.net 复选框控件在跨度内呈现为输入标记和标签。我尝试将我的样式仅应用于跨度，但它不起作用，也没有将样式应用于输入标签。对我有用的是将样式应用于标签：
.sameLine label {
display: inline;
}
回答by Developer
An article in code project says:
代码项目中的一篇文章说：
"The available text length for each CheckBox/RadioButton has been limited (I don't know what's causing the limitation), so the text will begin to wrap after 8 characters if you use multiple words. This is why the ‘white-space: nowrap' is used in the CSS to eliminate that."
“每个 CheckBox/RadioButton 的可用文本长度是有限的（我不知道是什么导致了这种限制），所以如果你使用多个单词，文本将在 8 个字符后开始换行。这就是为什么'空格：在 CSS 中使用 nowrap' 来消除这种情况。”
The Solution for the alignment issue is that you need to set the style property of the checkbox list tag as,
对齐问题的解决方案是您需要将复选框列表标签的样式属性设置为，
style="white-space:nowrap";
I think that should work for the plain HTML tags also.try using the same style statement in the css file too.
我认为这也适用于纯 HTML 标签。尝试在 css 文件中也使用相同的样式语句。
回答by jaczjill
Set property RepeatLayout = 'Flow' of CheckBoxList
设置属性RepeatLayout = 'Flow' of CheckBoxList
By default, repeat layout is set to 'Table' due to that it comes to new line.
默认情况下，重复布局设置为“表格”，因为它涉及到新行。
If layout is set to 'Flow' then checkboxes will be displayed on same line.
如果布局设置为“流程”，则复选框将显示在同一行上。
回答by Vital
As long as this was the first link in google for this question - posting answer from another answered question Asp:CheckBox checkbox and text are not on the same line
只要这是谷歌中针对此问题的第一个链接 - 发布另一个已回答问题的答案Asp:CheckBox 复选框和文本不在同一行
Simple style display:inline-block; fixes issue. Of course, you'll want to keep in in CSS file, rather than in asp control properties. :)
简约风格展示：inline-block；修复问题。当然，您需要保留在 CSS 文件中，而不是在 asp 控件属性中。:)
<asp:CheckBox style="display:inline-block;" ID="CheckBoxShowParameters" runat="server" Text="Show Parameters" />
回答by sharad Raghuwanshi
.checkboxlist_nowrap
{
white-space:nowrap;
display:inline-block;
}
回答by krishna
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal">
.checkboxlist_nowrap label
{
font-weight:400;
padding-left:3px;
}
Use RepeatDirection property. This worked for me!!
使用 RepeatDirection 属性。这对我有用！！
回答by gavin
I had the same exact problem. For me, it was setting the width of the input to 100% in the css file that caused the problem. the checkbox control is made up of the input tag and the label tag. I set the input tag to take up 100% of the width and that caused the label tag to start from a new line. My advice is check your css file!
我有同样的问题。对我来说，它是在导致问题的 css 文件中将输入的宽度设置为 100%。复选框控件由输入标签和标签标签组成。我将输入标签设置为占宽度的 100%，这导致标签标签从新行开始。我的建议是检查你的 css 文件！
