выравнивание элементов li в одной строке

0

Я пытаюсь иметь элементы li в одной строке. Мне это удалось, но по какой-то причине каждый элемент li разбивается на 2 строки. Я не знаю, почему. Есть ли способ исправить это?

HTML:

<section class="carousel price_carousel">   <!--Price section -->
<div class="wrapper" >
  <ul  class="list">
    <li>TEXT TEXT </li>
    <li>TEXT TEXT TEXT TEXT TEXT</li>
    <li>TEXT TEXT TEXT TEXT TEXT</li>
 </ul>
 </div>

JSfiddle (с CSS): http://jsfiddle.net/bgeswkr4/

  • 2
    Вы ищете white-space: nowrap ? jsfiddle.net/gu2em2ex (предполагается, что они inline элементы ..).
  • 0
    Теперь они остаются на одной линии, но точки слияния исчезают.
Показать ещё 3 комментария
Теги:

2 ответа

3
Лучший ответ

Удалите поплавки и измените атрибуты inline-block на li элементы. Как это:

.wrapper {
    text-align: center;
}
.price_carousel .list {
    padding-left: 1em;
    display:block;
    margin: 0;
}
.price_carousel .list li {
    display: inline-block;
    vertical-align: middle;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

Я добавил white-space: nowrap; объявление элементам li чтобы они никогда не ломались внутри, но вы можете снять его (я обычно беру его сам, но зависит от вас).

Но если вы хотите, чтобы UL никогда не ломался (поэтому LI всегда будет в одной строке), просто добавьте это white-space: nowrap; декларация в UL

Смотрите здесь скрипку

ИЗМЕНИТЬ, ЧТОБЫ ВКЛЮЧАТЬ БУЛЛЕТЫ: элементы inline-block не отображают list-style-type, поэтому варианты включения маркеров в ваш случай следующие:

a) использовать float: left;

.price_carousel .list li {
    float:left;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

б) использовать фоновое изображение в качестве пули

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap; padding-left:30px; background:url('http://upload.wikimedia.org/wikipedia/commons/e/ef/Bullet_go.png') no-repeat center left;
}

c) включить диапазон в разметку HTML

HTML выглядит так:

    <ul class="list">
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
    </ul>

и CSS:

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
    padding-left:30px;
}
.bull {
    display:list-item
}
Поделиться
  • 1
    Я не вижу пуль: i.imgur.com/ysV4crh.jpg
  • 0
    ах, если вам нужны маркеры, тогда все по-другому, вы должны внести изменения, так как inline-block не отображает тип стиля списка (и я не учел это, так как навигация с маркерами не распространена). См. Редактирование ответа для этих изменений.
1

В Chrome он отображается правильно, и все они отображаются на одной строке, если вы делаете окно больше.. из-за длины строки и того факта, что вы добавили левый край, нет места для них в той же строке, если вы не сделаете окно достаточно большим, чтобы они это сделали.

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

Теперь я вижу, что в Firefox он разбивается на две строки.. и мое первое предположение связано с этим стилем, что добавление:

list-style-position: inside;

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

Если вы удалите это, оно будет корректно отображаться.

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

Похоже, что Firefox может иметь некоторые проблемы со строкой в стиле списка. Здесь проблема, которую я нашел в Bugzilla с аналогичной проблемой: https://bugzilla.mozilla.org/show_bug.cgi?id=36854

Поделиться
  • 0
    Это странно. Вот как у меня на экране i.imgur.com/cEfnvIv.jpg
  • 0
    Немного больше изучив, поправил мой ответ с подробностями для вас.

Ещё вопросы

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