Question

这可能是一个常见问题，但我很难找到解决问题的解决方案

我有一个用jQuery显示的模态弹出窗口，这个弹出窗口包含一个Checkboxes和一个Button列表，代码如下：

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

弹出窗口正确显示，但每个复选框的标签位于复选框下方的行上。我似乎无法弄清楚为什么会发生这种情况，起初我认为包含div的{{1}}太小了所以我给每个CheckBoxList一个固定的宽度，但是没有帮忙。

我也尝试过应用这个CSS

div

它没有帮助，但我不确定是否实际使用了样式表，即使我有：

.checkboxlist_nowrap tr td label
{
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}

在我头上的标签。

任何人都可以提出我可以尝试的其他建议吗？

谢谢

更新：这是我的Jquery：

  <link href="../css/HelpDesk.css" rel="stylesheet" type="text/css" />

以下是我填充$(function () { $("#dialog").dialog({ autoOpen: false, show: "blind", width: 400, hide: "explode" });：

的方法

CheckBoxList

我已经尝试将CheckBoxList移动到form标签内部，这样就不会应用任何其他样式，也不会影响它，但是我仍然遇到同样的问题。

Answer 1

对我来说，上述解决方案都没有工作，因此我查找了确切的HTML呈现，发现标签的display属性设置为block。将其更改为内联工作：

.checkboxlist_nowrap label
{
     display:inline;
}

Answer 2

我认为这是一个CSS问题......我无法用您发布的内容重现空白包装。您可能希望确保在jQuery中正确设置对话框的宽度。

类似的东西：

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    draggable: false,
    resizable: false,
    width: 400,
    buttons: {
        Update: function () {
            $(this).dialog('close');
        },
        Cancel: function () {
            $(this).dialog('close');
        }
    }
});

此外，检查CSS（和javascript）的一个非常好的方法是使用谷歌Chrome的开发工具。它们与Chrome一起打包。您所要做的就是右键单击您遇到问题的元素并将鼠标悬停在窗口中的HTML上。它会告诉你所有应用它的类，并会显示边距/宽度/一切。它对我有无限的帮助。

Answer 3

我遇到了类似的问题。找到了我在下面粘贴的另一个堆栈溢出article的答案。

您希望显示：内联应用于ASP生成的元素以保存标签文本，而不是控件本身。所以，例如：

<style type="text/css">
label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />

Answer 4

代码项目中的一篇文章说：

“每个CheckBox / RadioButton的可用文本长度都是有限的（我不知道是什么导致了限制），所以如果你使用多个单词，文本将开始在8个字符后换行。这就是为什么'白色在CSS中使用-space：nowrap'来消除它。“

对齐问题的解决方案是您需要将复选框列表标记的样式属性设置为

style="white-space:nowrap";

我认为这应该适用于纯HTML标签，也可以在css文件中使用相同的样式语句。

Here is the Link that i am sharing now Please refer to it.

Answer 5

我遇到了同样的问题。对我来说，它是在导致问题的css文件中将输入的宽度设置为100％。复选框控件由输入标签和标签标签组成。我将输入标记设置为占据宽度的100％，这导致标签标记从新行开始。我的建议是检查你的css文件！

Answer 6

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

通过查看源查看浏览器中呈现的html，我看到样式添加了一个span，并且asp.net复选框控件在span中呈现为输入标记和标签。我尝试将我的风格仅应用于跨度，但它不起作用，也没有将样式应用于输入标签。对我有用的是将风格应用于标签：

.sameLine label {
    display: inline;
}

Answer 7

设置属性 RepeatLayout = CheckBoxList的'Flow'

默认情况下，重复布局设置为“表格”，因为它是新行。

如果布局设置为“Flow”，则复选框将显示在同一行。

Answer 8

只要这是Google针对此问题的第一个链接 - 从另一个回答的问题Asp:CheckBox checkbox and text are not on the same line

发布回答

简单的样式显示：内联块;修复问题。当然，您希望保留CSS文件，而不是asp控件属性。：）

<asp:CheckBox style="display:inline-block;" ID="CheckBoxShowParameters" runat="server" Text="Show Parameters" />

Answer 9

.checkboxlist_nowrap
{
white-space:nowrap;
display:inline-block;
}

Answer 10

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal">

.checkboxlist_nowrap label
    {
        font-weight:400;
        padding-left:3px;
    }

使用RepeatDirection属性。这对我有用!!

Answer 11

将此标记为已关闭，因为我从未设法弄明白并且问题已传递给另一个开发人员。当我把它拿回来时，会在这里发布答案。

我真的很感谢那些不打算投票支持我的人，因为我已经不再在公司工作了，我绝对没有办法重新创建问题或验证人们发布的任何解决方案。要关闭，所提供的解决方案都没有解决问题。

如何使ASP CheckBoxList标签与复选框保持在同一行

11 个答案: