Как расположить список в строчку css

Как разместить пункты списка горизонтально?

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).

Пример 1. Горизонтальный список

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .

Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.

ul, li — разместить элементы списка горизонтально

По-умолчанию элементы списка будут располагаться вертикально. В случае, если необходимо разместить их горизонтально, можно использовать седующий способ:
HTML:

Главным в данном примере является то, что к селектору li добавлен стилевой атрибут display со значением inline , который преобразует блочный элемент во встроенный. Также, чтобы убрать отступы вокруг списка, добавлены параметры margin и padding к селектору ul .

Выстроить элементы списка в одну строку

Выстроить таблицы в одну строку
Доброго времени суток. опять нужна помощь. Есть две таблицы. Нужно чтобы они были на одном уровне.

Выстроить блоки в одну строку
Вот код. Нужно куда показывает стрелка. <html> <head> <title>Урок 4</title> </head> <body>.

Выстроить checkbox и label в одну строку
Как вставить checkbox и описание к нему в одну строку, в линию ровно? <div >

Необходимо выстроить два блока в одну строку
подскажите пожалуйста, как сделать два дива в одну строчку, так чтобы получилось 1+1? ставлю.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *