Question

 <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循环添加了这些复选框。渲染时，它们被放置在单独的行中。我希望它们水平对齐。

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

这会使您的标签与您的复选框一致。

希望这会有所帮助！

谢谢，斯瓦特

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

Answer 3

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

希望这个帮助

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

3 个答案: