如何保持复选框垂直对齐？

Question

现在我在面板中有一个复选框列表，使用：

            <div style="float:right; position:relative; ">
                <Label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</Label>
            </div>
            <div style="float:right; position:relative; ">
                <Label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem => item.b2)</Label>
            </div>
            <div style="float:right; position:relative; ">
                <Label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem => item.b3)</Label>
            </div>

但是，有时复选框不会保留在每个单独的行中，而是会跳转到与另一个复选框相同的行。 我希望它被格式化为

BOX1

BOX2

BOX3

但偶尔会变成：

Box1 Box2

BOX3

我怎样才能解决这个问题？？

Answer 1

根据您在这里尝试做的事情，我想到的是解决方案

<body><div style="float:right;/* position:relative; */">
                <label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem =&gt; item.b1)</label>
            </div>
  <br>
            <div style="float:right;/* position:relative; */">
                <label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem =&gt; item.b2)</label>
            </div>
  <br>
            <div style="float:right;/* position:relative; */">
                <label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem =&gt; item.b3)</label>
            </div>
</body>

解决方案2：

 <body><div style="/* float:right; */position: relative;">
                    <label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem =&gt; item.b1)</label>
                </div>
                <div style="/* float:right; */position: relative;">
                    <label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem =&gt; item.b2)</label>
                </div>
                <div style="/* float:right; */position: absolute;">
                    <label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem =&gt; item.b3)</label>
                </div>
    </body>

Answer 2

我建议你将所有的盒子放在一个列表中，如下所示，以保持一个对齐的垂直顺序我还清理了你的代码，使其更具可读性

<ul style="float:right; position:relative; ">
  <li>
    <Label>
      <span style="font-weight:normal; font-size:16px;">Box1</span>@Html.CheckBoxFor(modelItem => item.b1)
    </Label>
  </li>
</ul>
<ul style="float:right; position:relative; ">
  <li>
    <Label>
      <span style="font-weight:normal; font-size:16px;">Box2</span>@Html.CheckBoxFor(modelItem => item.b2)
    </Label>
    </li>
</ul>
<ul style="float:right; position:relative; ">
  <li>
    <Label>
      <span style="font-weight:normal; font-size:16px;">Box3</span>@Html.CheckBoxFor(modelItem => item.b3)
    </Label>
  </li>
</ul>

可以找到一个演示：这里

你可以在这里阅读更多关于html list的信息

Answer 3

你需要清理浮子

将此样式应用于父元素：

.group:after {
  content: "";
  display: table;
  clear: both;
}

在你的情况下：

<span class="group">
    <div style="float:right; position:relative; ">
        <Label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</Label>
    </div>
<span>

如何保持复选框垂直对齐？

问题描述

3 个解决方案

解决方案1
0 2017-02-16 20:34:50

解决方案2
0 2017-02-16 20:41:01

解决方案3
0 2017-02-16 21:25:30

如何保持复选框垂直对齐？

问题描述

3 个解决方案

解决方案1 0 2017-02-16 20:34:50

解决方案2 0 2017-02-16 20:41:01

解决方案3 0 2017-02-16 21:25:30

解决方案1
0 2017-02-16 20:34:50

解决方案2
0 2017-02-16 20:41:01

解决方案3
0 2017-02-16 21:25:30