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

现在我有使用在面板内部复选框列表：如何保持复选框垂直对齐？

  <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

我怎么能解决这个问题？？

来源

2017-02-16 yfan183

这意味着它们占据的容器元素宽度的100％以上的组合宽度。检查宽度，或强制使用不超过'宽度：33.33％'每个。 –

取决于你正在尝试做的，是对夫妇的解决方案我心目中

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

来源

2017-02-16 20:34:50

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

<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

来源

2017-02-16 20:41:01

您需要clear your floats

这种风格适用于父元素：

.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>

来源

2017-02-16 21:25:30

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

回答

相关问题