li текст автоматически приходит в центр, если места недостаточно

0

Вот мой html-код:

<div class="col-md-3">
    <ul id="id_taxonomy_terms">
    <li>
    <label for="id_taxonomy_terms_0">
    <input id="id_taxonomy_terms_0" type="radio" value="1" name="taxonomy_terms">
    test1
    </label>
    </li>
    <li>
    <label for="id_taxonomy_terms_1">
    <input id="id_taxonomy_terms_1" type="radio" value="2" name="taxonomy_terms">
    test2test2test2
    </label>
    </li>
    <li>
    <label for="id_taxonomy_terms_2">
    <input id="id_taxonomy_terms_2" type="radio" value="3" name="taxonomy_terms">
    test3test3
    </label>
    </li>
    <li>
    <label for="id_taxonomy_terms_3">
    <input id="id_taxonomy_terms_3" type="radio" value="4" name="taxonomy_terms">
    Substance HolonymsSubstance HolonymsSubstance Holonyms
    </label>
    </li>
    </ul>
</div>

Здесь снимок экрана:

Изображение 174551

Здесь css я добавил:

#id_taxonomy_terms li{
    list-style-type: none;
     float: left;
     margin-right: 25px;
}

Даже если список не может размещаться в данном поле div, я хочу, чтобы он плавал влево, а строка прерывалась и продолжалась с текстом. Как это сделать?

  • 0
    Имеет ли #id_taxonomy_terms фиксированную ширину?
  • 0
    Да, это перенос в <div class="col-md-3"> . Я использую bootstrap3
Теги:
css-float

2 ответа

1

float:left вызывает это. Вы даже не нуждаетесь в этом, потому что вы устанавливаете фиксированное значение в margin:right. Просто удалите его целиком.

#id_taxonomy_terms li{
    list-style-type: none;
    margin-right: 25px;
}

демонстрация

  • 0
    float: left не работает, если я сделаю это
  • 0
    @ user2032220 Удалить float: left
0

С вашей текущей разметкой #id_taxonomy_terms что #id_taxonomy_terms имеет width: 200px #id_taxonomy_terms, чтобы правильно выравнивать labels справа от inputs:

Способ №1

#id_taxonomy_terms {
    width: 200px;
}
#id_taxonomy_terms li{
    list-style-type: none;
    display: block;
    margin-right: 25px;
}
#id_taxonomy_terms input {
    margin-left: -16px;
}

Демо: http://jsfiddle.net/YP7bC/

Способ № 2:

Требуется, чтобы вы немного изменили свою разметку, но css использует floats вместо negative margin

#id_taxonomy_terms {
    width: 200px;
}
#id_taxonomy_terms li {
    list-style-type: none;
    display: block;
    margin-right: 25px;
    clear: both;
}
#id_taxonomy_terms input {
    float: left;
}
#id_taxonomy_terms label {
    float: left;
    width: 86%;
}

Демо: http://jsfiddle.net/xLWDs/

  • 0
    Не сработало, сэр.
  • 0
    Хм, так как оба метода не сработали, я бы посоветовал вам создать полную демоверсию jsfiddle, чтобы мы могли с этим поработать.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню