如何对齐动态添加的复选框？答案

【问题标题】：how to align dynamically added checkboxes?如何对齐动态添加的复选框？
【发布时间】：2014-09-05 19:11:46
【问题描述】：

 <h5>* Amenities </h5>
        @foreach (var l in (SelectList)ViewBag.Amenities )
     { 
       <input type="checkbox" class="Amenity" name="Amenities" value="@l.Value"         id="@l.Value" @l.Selected ? "checked='checked';" : @String.Empty   /> 
          <label for="l@(l.Value)">@l.Text</label>
     }

我已经使用 for 循环添加了这些复选框。在渲染时，它们被放置在单独的行中。我希望它们水平对齐。

【问题讨论】：

所有其他条件都相同，这不会导致它们被放置在不同的行上。找到改变它的 CSS 并编辑它。
如果它们是垂直对齐的，那是因为您已经以这种方式设置了它们的样式。 This fiddle 显示默认（无样式）是水平对齐。您的项目中有一个 .css 文件覆盖了默认行为。使用您的浏览器工具检查元素并调整属性，直到达到您想要的效果。

标签： asp.net-mvc html asp.net-mvc-3 asp.net-mvc-4

【解决方案1】：

请尝试一下：

@foreach (var l in (SelectList)ViewBag.Amenities )
     { 
       <input type="checkbox" class="Amenity" name="Amenities" value="@l.Value"         id="@l.Value" @l.Selected ? "checked='checked';" : @String.Empty   /> 
          <label style="display:inline" for="l@(l.Value)">@l.Text</label>
     }

这会将您的标签与您的复选框内联。

希望这会有所帮助！

谢谢，斯瓦蒂

【讨论】：

做得很好！但是为什么给复选框或 div 添加样式不起作用呢？
因为在这里您需要将标签与您的复选框内联。如果您必须先放置标签，然后在标签旁边放置复选框，那么您需要使复选框显示：内联。如下所示：

【解决方案2】：

试试这个：

  @foreach (var l in (SelectList)ViewBag.Amenities )
  { 
    <div style="display: inline">
       <input type="checkbox" class="Amenity" name="Amenities" value="@l.Value"         id="@l.Value" @l.Selected ? "checked='checked';" : @String.Empty   /> 
       <label for="l@(l.Value)">@l.Text</label>
    </div>
  }

【讨论】：

你也可以试试'display: inline-block'。如果它不起作用，您应该查看“Amenity”类，也许其中的某些属性会阻止“内联”。

【解决方案3】：

在每个输入元素上尝试inline:display-block

希望有帮助

【讨论】：

不，兄弟它没用。我得到一长串垂直对齐的复选框，看起来很奇怪。
检查this