Как выровнять флажок и метку в той же строке в html?

В тегах li я устанавливаю флажок и ввод метки.

Если текст метки больше, чем метка, текст переходит на следующую строку.

Я обернул текст метки, но он не выравнивал флажок и метку в одной строке, если текст метки слишком длинный.

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label style="word-wrap:break-word">testdata</label>
</li>

Спасибо,

Ответ 1

Установите флажок с меткой и проверьте это

HTML:

<li>
     <label for="checkid"  style="word-wrap:break-word">
        <input id="checkid"  type="checkbox" value="test" />testdata
     </label>
</li>

CSS

[type="checkbox"]
{
    vertical-align:middle;
}

http://jsfiddle.net/pKD9K/1/

Ответ 2

Вы должны использовать <label for=""> для флажков или радиостанций, а для выравнивания флажков vertical-align достаточно

Попробуйте изменить свою разметку на

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label for="checkid">testdata</label>
</li>

<li>
    <input id="checkid2" type="checkbox" value="test" />
    <label for="checkid2">testdata 2</label>
</li>

И установите CSS как

input[type="checkbox"]
{
    vertical-align:middle;
}

В случае длинного текста

label,input{
    display: inline-block;
    vertical-align: middle;
}

Боковое примечание: в метке значение флага должно быть идентификатором флажка.

Fiddle

Updated Fiddle

Ответ 3

Пожалуйста, попробуйте

<li>
<input id="checkid" type="checkbox" value="test" style="float: left;">
<label style="word-wrap: break-word; line-height: 16px; float: left;">testdata</label>
</li>

Ответ 4

Просто поместите div вокруг ввода и метки...

    <li>
      <div>
        <input id="checkid"  type="checkbox" value="test" />
      </div>
      <div>
        <label  style="word-wrap:break-word">testdata</label>
      </div>
    </li>

Ответ 5

Если вы используете bootstrap, используйте этот класс в холдинге.

radio-inline

Пример:

<label for="active" class="col-md-4 control-label">Active</label>
<div class="col-md-6 radio-inline">
    <input type="checkbox" name="active" value="1">
<div>

Здесь метка Active и флажок окажутся выровненными.

Ответ 6

Используйте ниже CSS, чтобы выровнять метку с флажком

    .chkbox label
            {
                position: relative;
                top: -2px;
            }

<div class="chkbox">
<asp:CheckBox ID="Ckbox" runat="server" Text="Check Box Alignment"/>
</div>