如何保持復選框垂直對齊？

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