c# - 不将 ListItem 文本包装在 Horizo​​ntal CheckBoxList 中

Question

我有动态复选框列表:

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProjectOrigin.ascx.cs" Inherits="UserControl_PEM_ASPX_ProjectOrigin" %>
<div style="display:block;">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal"  >
</asp:CheckBoxList></div>

并在我的函数中添加 ListItems

private void ChkListBoxInit()
    {
        if (CheckBoxList1.Items.Count != 0) return;
        CheckBoxList1.Items.Clear();

        DesProvider p = new DesProvider();
        List<tblDes> list = p.GetByDesGrpId(grpid).OrderBy(a => a.DesId).ToList();
        ListItem li;
        foreach (var l in list)
        {
            li = new ListItem(l.DesF, l.val);
        CheckBoxList1.RepeatLayout = RepeatLayout.Flow;
            CheckBoxList1.Items.Add(li);
        }
     }

这样生成的Html是:

<div style="display:block;"> 
  <span id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1">
    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$0" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_0">بهبود فرآیند کار</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$1" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_1">بهبود محیط کار</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$2" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_2">ایمنی و بهداشت</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$3" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_3">رفاهی</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$4" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_4">فروش و مشتریان</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_5" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$5" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_5">کاهش هزینه ها</label>

    <input id="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_6" type="checkbox" name="ctl00$MainContent$FormView1$ProjectOrigin1$CheckBoxList1$6" />
    <label for="ctl00_MainContent_FormView1_ProjectOrigin1_CheckBoxList1_6">سایر موارد</label>
  </span>
</div>

如何避免 ListItem 文本在行尾换行并将复选框和此文本保持在一起？

Answer 1

确保 <label>元素具有 css 设置 display: block; .这应该确保标签文本都在同一行。

您可以在 this jfiddle 中看到这个.标签具有 display:inline; 的示例显示与您看到的相同的包装。标签具有 display:block; 的示例显示停留在同一行的文本。

在有问题的 html 发布后更新:

因为 CheckBoxList正在生产<input>与每个相关的分开 <label> ，我看不到让它们保持流动的简单方法，并保证标签不包裹 和 标签和复选框保持在同一行。你可以设置 label, input { float: right; display: block; }在您的 CSS 中，但这将允许标签与其相关输入位于不同的行上。

我能看到的最佳解决方案是不使用 CheckBoxList .相反，使用 Repeater , 布局如下所示:

<asp:Repeater id="checkboxes" runat="server">
  <ItemTemplate>
    <div class="checkboxItem">
      <asp:CheckBox runat=server />
    </div>
  </ItemTemplate>
</asp:Repeater>

然后您将以类似的方式对转发器进行数据绑定(bind)，在每个 _ItemDataBound 中填充 CheckBox 的值。事件。

封闭每个CheckBox在<div>并添加 label, .checkboxItem { float: left; }根据 the technique showed in this answer，在你的 CSS 中应该强制复选框和标签保持在同一行上.