CheckBoxList 项目对齐答案

【问题标题】：CheckBoxList Items AlignmentCheckBoxList 项目对齐
【发布时间】：2012-09-01 00:43:04
【问题描述】：

我知道这是一个相当简单的问题，但我似乎无法正确对齐我的复选框列表。

我想要复选框左侧的标签，但仍然对齐复选框（参见下面的示例）。尝试了 TextAlign="Left"，但这使得复选框列表项与文本对齐，而不是复选框。我还尝试在我的表格中使用右对齐。下面代码的当前结果如下所示：

       Item 1 [ ]
      Another Item [ ]
      Yet Another Item [ ]
      Last Item [ ]

标记：

   <tr align="right" valign="top">
    <td align="right"><asp:CheckBoxList ID="Item1" runat="server" enabled="false" CellPadding="0" CellSpacing="0" style="font-size: x-small;" TextAlign="Left"/>
   </td>
   <td align="right"><asp:CheckBoxList ID="Another Item" runat="server" enabled="false" CellPadding="0" CellSpacing="0" style="font-size: x-small" />
   </td>
   </tr>

我希望结果如下所示：

            Item 1 [ ]
      Another Item [ ]
  Yet Another Item [ ]

任何帮助将不胜感激！

【问题讨论】：

只是一般性评论...您将从使用CSS 而不是您当前用于样式设置的 HTML 和 ASP.NET 属性的混合中受益（在许多方面）。
也只是一般性评论... ID 必须是一个单词。它不需要空格
您在标记中显示 CheckBoxList 元素，尽管您似乎只想要单个 CheckBox 元素。那是错字吗？否则，您需要先在那里查找您的样式问题，因为CheckBoxList 实际上会在<table> 中为<input> 和<label> 元素呈现html 标记。
不清楚是我的错。我正在处理两个 CheckBoxLists，它们的项目排列方式与我的示例一样。

标签： asp.net html css

【解决方案1】：

你可以像这样使用 CheckBoxList：

  <div style="text-align: right">
       <asp:CheckBoxList TextAlign="Left" runat="server" >
          <asp:ListItem Text = "foo" />
          <asp:ListItem Text = "bar" />
       </asp:CheckBoxList>
  </div>

【讨论】：

【解决方案2】：

你的意思是这样的？

<ul style="text-align:right; width:200px;">
    <li>Item 1 <input type="checkbox" value="Item1" name="group" /></li>
    <li>Another Item <input type="checkbox" value="Item2" name="group" /></li>
    <li>And another one <input type="checkbox" value="Item3" name="group" /></li>
</ul>

这里是jsfiddle

【讨论】：