Как сохранить флажки по вертикали?

Сейчас у меня есть список флажков внутри панели с помощью:Как сохранить флажки по вертикали?

  <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% ширины элемента контейнера. Проверьте ширину или силу, чтобы использовать не более 'width: 33.33%' each. –

В зависимости от того, что вы пытаетесь сделать здесь несколько решений я имею в виду

<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

Как сохранить флажки по вертикали?

ответ

Смежные вопросы