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>

可以找到一个演示：HERE

您可以阅读有关html列表HERE

的更多信息

Answer 3

您需要clear your floats

将此样式应用于父元素：

function myFunction() {
   var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];

 // This inserts 1 columns before the first column
 sheet.insertColumnsBefore(1, 1);
  
  // labels the weeks static
      ss.getRange('A1').setFontWeight("bold").setValue("Week1").setBackground("#BBBBBB");
      ss.getRange('B1').setFontWeight("bold").setValue("Week2").setBackground("#BBBBBB");
      ss.getRange('C1').setFontWeight("bold").setValue("Week3").setBackground("#BBBBBB");
      ss.getRange('D1').setFontWeight("bold").setValue("Week4").setBackground("#BBBBBB");
      ss.getRange('E1').setFontWeight("bold").setValue("Week5").setBackground("#BBBBBB");
       ss.getRange('F1').setFontWeight("bold").setValue("Week6").setBackground("#BBBBBB");
}

在你的情况下：

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

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

3 个答案: