Плавающие элементы списка вправо, а не вниз

0

Я хотел бы поместить элементы списка вправо, используя список (мне нравятся точки маркера) и хочу держаться подальше от таблиц. Я также хотел бы настроить пространство между элементами списка и указать, когда элементы списка будут обертываться. Например, 3 элемента списка для каждой строки.

Пример изображения:

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

Как это может быть сделано?

Теги:

4 ответа

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

Использование display: inline стиль на элементе li приведет к тому, что ваш список будет проходить горизонтально. Дальнейшее стилирование (например, padding и margin) позволяет вам манипулировать пространством между элементами, а list-style-type даже позволит вам настроить внешний вид пули.

Я не знаю никаких простых способов указать, какой элемент будет разбит на новую строку. Он должен просто обернуться, когда он достигнет края его контейнера. (Вы можете указать ширину списка, хотя это изменит тот элемент, который разбивается на список в зависимости от размера шрифта пользователя.)

Поделиться
  • 0
    Спасибо, Брайан. Так что, если я действительно хотел конкретно указать, что строка разбивается на 3 столбца и не изменяется в зависимости от размера шрифта пользователя, мне следует использовать таблицу? Если да, то как я могу достичь вышеизложенного с помощью таблицы?
  • 0
    @Growler, если вам нужна табличная информация (например, две строки по три столбца в каждой), тогда да, таблица является правильным выбором разметки. Если вам нужен список элементов (по горизонтали или нет, с упаковкой в контейнере или без), тогда список является правильным выбором разметки. (Если список должен иметь естественный порядок, упорядоченный список является правильным выбором.) Обратите внимание: ваш HTML сообщает браузеру, что находится на странице, ваш CSS сообщает браузеру, как он должен выглядеть , а ваш JavaScript сообщает браузеру как это должно вести себя .
2

Вы должны сделать что-то вроде этого:

li {
  float: left;
}

если вы хотите, чтобы они проходили несколько строк, например, ваш пример, установите ширину на ul так:

ul {
  width: 200px;
}

(200px - всего лишь примерный номер)

Поделиться
0

попробуйте стиль css

ul{
width: //configure with your self until 3 list/row
}

li{
display:inline;
float:left;
}
Поделиться
  • 0
    Это перемещает его по горизонтали, но не позволяет мне указывать интервал между каждым элементом списка.
  • 0
    добавить margin-right в li, как margin-right: 30px;
0

Могут быть некоторые, например:

Пример: http://jsfiddle.net/LK7rd/

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS

ul{
    width: 50%;
}

ul li{
    width: 25%;
    display: block;
    float: left;
}
Поделиться
  • 0
    Это не похоже на работу. Основано ли это на том, что имя предмета имеет одинаковую длину каждый раз? У меня есть элементы списка переменной длины, и это неловко ломает слово

Ещё вопросы

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