Css горизонтальный список: Как разместить элементы списка горизонтально?

05.06.2023 alexxlab

Содержание

css3 — Как из вертикального списка — сделать горизонтальный

Как из вертикального списка:

Сделать, чтобы он был горизонтальный? Вот кусочек кода:

css3
html5
списки

Через display: inline-block для li

.horisontal-ul li {
   display: inline-block;
}

<ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  <li><a href="#">Ссылка 4</a></li>
  <li><a href="#">Ссылка 5</a></li>
</ul>

ul {
  display: flex;
}
li {
  margin-left: 20px;
}
li:nth-child(1){
  margin:0;
}

<nav>
  <ul>
    <li>Главная</li>
    <li>Обучения</li>
    <li>Конференция</li>
    <li>О нас</li>
  </ul>
</nav>

Вариантов несколько.

1 Варинат. C помощью flex:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 1. Flex */
nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav ul li {
  margin: 0 1rem;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

2 Вариант. inline-block:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 2. inline-block */
nav ul {
  text-align: center;
}

nav ul li {
  margin: 0 1rem;
  display: inline-block;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

3 Вариант. float: left:

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 3. float */
nav ul {
  text-align: center;
  overflow: hidden;
}

nav ul li {
  padding: 0 1rem;
  float: left;
  width: 25%;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

4 Вариант. table:

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 4. table */
nav ul {
  text-align: center;
  display: table;
  width: 100%;
}

nav ul li {
  padding: 0 1rem;
  display: table-cell;
  width: 25%;
}

<nav>
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href="#">Обучение</a>
    </li>
    <li>
      <a href="#">Конференции</a>
    </li>
    <li>
      <a href="#">О нас</a>
    </li>
  </ul>
</nav>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — CSS. Как поставить список в одну строку?

Вроде поставил float: left; но список не выравнивается по левому краю и не встает в одну линию

* {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #EABCBC;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}
.complex_list {
  background-color: #76DBE4;
}
.complex_list ul li {
  float: left;
}
.complex_list li {
  font: 0.75em arial;
  list-style: none;
}
.complex_list li a {
  text-decoration: none;
  color: #FF8604;
}
.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}

<div>
  <h2>Стройка</h2>
  <ul>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>

html
css
float

. complex_list ul li — Это значит «все li внутри ul, который внутри complex_list». Селектор неправильный, должен быть

ul.complex_list li — «все li внутри ul с классом complex_list» и заработает.

Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list { display: flex; }:

* {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #169;
  color: white;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}
.complex_list {
  background-color: #2bd;
  padding: 4px;
}
ul.complex_list {
  display: flex;
}
.complex_list li {
  font: 0.75em arial;
  list-style: none;
}
.complex_list li a {
  text-decoration: none;
  margin: 2px;
  color: #fff;
}
.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}

<div>
  <h2>Стройка</h2>
  <ul>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>

у вас ошибка в селекторе .

complex_list ul li вы пытаетесь применить стили к несуществующему элементу, селектор должен быть такого вида

.complex_list li {
    float: left;
}

хотя для этой задачи лучше использовать

.complex_list li{
    display: inline-block;
}

либо такой вариант

.complex_list {
    display: flex;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

горизонтальных списков CSS | UnusedCSS

Списки HTML, представленные тегом

, по умолчанию являются вертикальными и маркированными. Для пользовательского стиля нам нужно применить специальные свойства CSS.
Например, давайте построим горизонтальный список.
Начнем с простого ненумерованного списка.
```
 <ул>
Главная
Проекты
О нас
Связаться
```

Так будет выглядеть список

Дом
Проекты
О нас
Контакт

Допустим, мы хотим придать приведенному выше списку стиль, который выглядит примерно так:

Дом
Проекты
О нас
Контакт

Итак, как мы можем этого добиться? Давайте рассмотрим процесс шаг за шагом.
Наше первое наблюдение заключается в том, что в конечном результате нам не нужен стиль пули. Стиль элементов списка управляется свойством list-style. Давайте удалим их, установив значение none.

 <ул>
Главная
Проекты
О нас
Связаться

ul.horizontal-список {
  стиль списка: нет;
}

Дом
Проекты
О нас
Контакт

Пули закончились, но наш список по-прежнему вертикальный. Это потому, что элементы списка по умолчанию являются элементами с блоком 9.0004 и, следовательно, занимают все пространство по горизонтали. Давайте настроим их на отображение встроенных блоков .

 ul.horizontal-list li {
  отображение: встроенный блок;
}

Дом
Проекты
О нас
Контакт

Итак, у нас есть горизонтальный список.

Нам нужно добавить вертикальную черту справа от каждого элемента списка, но не от последнего.

 ul.horizontal-list li:not(:last-child) {
граница справа: 1 пиксель сплошной черный;
}

Дом
Проекты
О нас
Контакт

Давайте добавим отступы к каждому элементу списка.

 ul.horizontal-list li {
  // остальные стили сверху
  заполнение: 0 0.5rem;
}

Дом
Проекты
О нас
Контакт

Длина текста в каждом элементе списка различается. Чтобы иметь единый внешний вид, мы зададим постоянную минимальную ширину всем элементам и выровняем текст по центру.

 ul.horizontal-list li {
  // остальные стили сверху
  мин-ширина: 12рем;
выравнивание текста: по центру;
}

Дом
Проекты
О нас
Контакт

Теперь у вас есть готовый список. Все, что нам нужно сделать, это установить цвет фона и текста в соответствии с темой вашего сайта/приложения.

Дом
Проекты
О нас
Контакт

 Стили списка по умолчанию

<ул>
  Главная
  Проекты
  О нас
  Связаться


Горизонтальный список
<ул>
  Главная
  Проекты
  О нас
  Связаться

 body { семейство шрифтов: без засечек; }

ли: наведите {
  оформление текста: подчеркивание;
}

ul. horizontal-список {
  стиль списка: нет;
  цвет фона: #48abe0;
  белый цвет;
  отображение: встроенный блок;
  набивка: 1рем 2рем;
  поле-верх: 1re;
}

ul.horizontal-list li {
  отображение: встроенный блок;
  заполнение: 0 0.5rem;
  мин-ширина: 7rem;
  выравнивание текста: по центру;
  курсор: указатель;
}

ul.horizontal-list li: not (: last-child) {
  граница справа: 1 пиксель сплошной белый;
}

`Варианты использования`

Горизонтальные списки — один из наиболее часто используемых объектов в веб-дизайне. Возможно, вы общаетесь с ними ежедневно. Чаще всего они встречаются в навигационных панелях, заголовках таблиц, списках вкладок и т. д.

Давайте рассмотрим другие реализации.

Вот аналогичный список

См. Pen Simple Horizontal List (CSS) Джереми Кэриса (@jeremycaris) на CodePen.

Группа горизонтального списка

См. группу горизонтального списка Pen с Bootstrap 3 от Lazy Jones (@lazy) на CodePen.

Заголовок таблицы в стиле Excel

См. меню горизонтального списка Pen css от CSS4HTML (@CSS4HTML) на CodePen.

Реализация, подобная панели навигации

См. Горизонтальный список пера — float: оставил Джейсон Стюарт (@jastew) на CodePen.

`Заключение`

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

Поделиться в Твиттере · Поделиться на Facebook

← Полукруг CSS
Руководство по переносу текста в CSS →

`html - Элементы горизонтального списка`

спросил 10 лет, 1 месяц назад

Изменено 4 месяца назад

Просмотрено 246 тысяч раз

Итак, я попытался создать горизонтальный список для использования на новом веб-сайте, который я разрабатываю. Я пробовал ряд предложений, уже найденных в Интернете, таких как установка «плавающего» влево и т. Д., Но ни одно из них не сработало, когда дело доходит до решения проблемы.

 ul#элементы меню {
      фон: нет;
      высота: 50 пикселей;
      ширина: 100 пикселей;
      маржа: 0;
      заполнение: 0;
    }
    ul#элементы меню li {
      дисплей: встроенный;
      стиль списка: нет;
      поле слева: авто;
      поле справа: авто;
      верх: 0px;
      высота: 50 пикселей;
    }
    ul#menuItems li a {
      семейство шрифтов: Arial, Helvetica, без засечек;
      текстовое оформление: нет;
      вес шрифта: жирнее;
      цвет: #000;
      высота: 50 пикселей;
      ширина: авто;
      дисплей: блок;
      выравнивание текста: по центру;
      высота строки: 50px;
    }

 <ул>
  
    Главная
  
  
    Профили ди-джеев

В настоящее время я не уверен, что вызывает эту проблему, как мне ее решить?

HTML
CSS

 1
 Я заметил, что многие люди используют этот ответ, поэтому решил немного его обновить. Больше не включает поддержку браузеров, которые сейчас не поддерживаются.
 ул > ли {
    отображение: встроенный блок;
    /* Вы также можете добавить здесь немного полей, чтобы это выглядело красивее */
} 
 <ул>
     какой-то элемент
    
     другой элемент
    
 
6
 Я думаю, что простое решение, которое я нашел, ниже
 ul{
    дисплей: гибкий;
}
 
3
 Эта скрипта показывает, как
 http://jsfiddle.net/9th7X/
 ul, li {
    дисплей: встроенный
}
 
 Отличные ссылки на списки и css здесь:
CSS Design: Taming Lists
 4
 Гораздо лучше использовать  inline-block  , потому что вам больше не нужно использовать  clear:both  в конце вашего списка.
 Попробуйте это:
 
    
        какой-то элемент
    
    
        другой элемент
    

 
 CSS:
 ул > ли {
    дисплей: встроенный блок;
}
 
 Взгляните на это здесь: http://jsfiddle. net/shahverdy/4N6Ap/
 Вы также можете использовать встроенные блоки, чтобы избежать плавающих элементов
 
    
        какой-то элемент
    
    
        другой элемент
   

 
, а затем стиль:
 li{
    /* с исправлением для IE */
    дисплей: встроенный;
    дисплей: встроенный блок;
    масштаб: 1;
    /*
    дополнительные стили, чтобы это выглядело красиво
    */
 }
 
 таким образом вам не нужно будет ничего плавать, устраняя необходимость в очистке
 2
 сильный текс
 ул {
            стиль списка: нет;
            дисплей: гибкий;
            выравнивание содержимого: пространство вокруг;
        } 
 <ул>
            бла
            блабла
            блаблабла
         
 Здесь вы можете найти рабочий пример с некоторыми дополнительными предложениями по динамическому изменению размера списка.

Css горизонтальный список: Как разместить элементы списка горизонтально?

css3 — Как из вертикального списка — сделать горизонтальный

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

html — CSS. Как поставить список в одну строку?

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

горизонтальных списков CSS | UnusedCSS

Варианты использования

Заключение

html - Элементы горизонтального списка

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

`Варианты использования`

`Заключение`

`html - Элементы горизонтального списка`

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