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

Posted 2023-03-06

【中文标题】如何使 ASP CheckBoxList 标签与复选框保持在同一行

【英文标题】：How to make ASP CheckBoxList labels stay on same line as checkbox

【发布时间】：2011-12-19 13:41:40

【问题描述】：

这可能是一个常见问题，但我正在努力寻找可以解决它的解决方案

我有一个使用 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>

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

我也尝试过应用这个 CSS

.checkboxlist_nowrap tr td label

    white-space:nowrap;
    overflow:hidden;
    width:100%;

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

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

在我的头标签中。

谁能建议我可以尝试的其他方法？

谢谢

更新：这是我的 Jquery：

 $(function () 
    $("#dialog").dialog(
       autoOpen: false,
       show: "blind",
       width: 400, 

       hide: "explode"
    );

这是我填充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

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

【问题讨论】：

***.com/questions/19891681/…

【参考方案1】：

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

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

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

【参考方案2】：

.checkboxlist_nowrap

white-space:nowrap;
display:inline-block;

【讨论】：

请为您的回答添加解释以供未来访问者使用。

【参考方案3】：

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

您希望将 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" />

【讨论】：

感谢您添加此内容。我使用您的示例通过将我的自定义类（仅定义“显示：内联”）添加到 @html.LabelFor 调用来解决我的 Razor 复选框问题。在包装整个复选框+标签的 div 上添加一层或两层不起作用。

【参考方案4】：

将此标记为已关闭，因为我从未设法弄清楚，并且该问题已传递给另一个开发人员。当我得到答案时会在这里发布答案。

我真的很感谢人们没有因为我将此标记为已关闭而投票反对我，我不再在公司工作，我绝对无法重现问题或验证人们发布的任何解决方案，并且在我设定的时间这关闭了提供的解决方案都没有解决问题。

【讨论】：

@Nick 很遗憾，没有，我没有得到任何答案并离开了工作，所以我无法验证任何未来的答案。

为什么我因为将其标记为已关闭而遭到反对？我无法删除帖子，无法验证人们的建议，因为我不再在同一个地方工作，而且我从未找到解决方案。

【参考方案5】：

只要这是 google 中针对此问题的第一个链接 - 发布另一个已回答问题的答案Asp:CheckBox checkbox and text are not on the same line

简单样式显示：inline-block；修复问题。当然，你会希望保存在 CSS 文件中，而不是保存在 asp 控件属性中。 :)

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

【参考方案6】：

设置属性RepeatLayout = CheckBoxList的'Flow'

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

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

【参考方案7】：

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

"每个 CheckBox/RadioButton 的可用文本长度受到限制（我不知道是什么导致了限制），因此如果您使用多个单词，文本将在 8 个字符后开始换行。这就是为什么 'white -space: nowrap' 在 CSS 中用于消除这种情况。”

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

style="white-space:nowrap";

我认为这也适用于纯 HTML 标签。尝试在 css 文件中也使用相同的样式语句。

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

【参考方案8】：

使用 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，我看到样式添加了一个跨度，并且 asp.net 复选框控件在跨度内呈现为输入标记和标签。我尝试将我的样式仅应用于跨度，但它不起作用，也没有将样式应用于输入标签。对我有用的是将样式应用于标签：

.sameLine label 
    display: inline;

【讨论】：

我很惊讶为什么没有人标记这个答案。问题不在于 jQuery，而在于 asp:CheckBoxList 而这个解决方案完美地解决了它！

【参考方案9】：

对我来说，上述解决方案都不起作用，所以我查看了呈现的确切 HTML，发现标签的 display 属性设置为阻止。将其更改为内联有效：

.checkboxlist_nowrap label

     display:inline;

【参考方案10】：

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

【参考方案11】：

我认为这是一个 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）的一个非常好的方法是使用 Google Chrome 的开发工具。它们与 Chrome 一起打包。您所要做的就是右键单击遇到问题的元素并将鼠标悬停在窗口中的 HTML 上。它会告诉你所有应用到它的类，并显示边距/宽度/一切。它对我有无限的帮助。

【讨论】：

感谢您的回复，我将使用我的 Jquery 更新我的帖子，但我只是通过将宽度设置为比需要的更宽来尝试它，但我仍然收到相同的错误 :(