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

alexxlab

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

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

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

  • css3
  • html5
  • списки

2

Через 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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Горизонтальный список с вертикальными элементами HTML

Задать вопрос

Вопрос задан

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

Просмотрен 254 раза

Есть горизонтальный список, где каждый элемент — просто текст и он работает хорошо

ul. hr {
  margin: 0;
  /* Обнуляем значение отступов */
  padding: 4px;
  /* Значение полей */
}
ul.hr li {
  display: inline;
  /* Отображать как строчный элемент */
  margin-right: 5px;
  /* Отступ слева */
  border: 1px solid #000;
  /* Рамка вокруг текста */
  padding: 3px;
  /* Поля вокруг текста */
}
<ul>
  <li>Мчади</li>
  <li>Када на мацони</li>
  <li>Пахлава</li>
  <li>Кчуч</li>
  <li>Лилибдж</li>
</ul>

Вывод такой:

   Мчади  Када на мацони  Пахлава  Кчуч Лилибдж

Но стоит мне попытаться сделать часть элементов более сложными, например вот так

ul.hr {
  margin: 0;
  /* Обнуляем значение отступов */
  padding: 4px;
  /* Значение полей */
}
ul.hr li {
  display: inline;
  /* Отображать как строчный элемент */
  margin-right: 5px;
  /* Отступ слева */
  border: 1px solid #000;
  /* Рамка вокруг текста */
  padding: 3px;
  /* Поля вокруг текста */
}
<ul>
    <li>
        Первая строчка
        <br />
        Вторая строчка
        <br />
        Третья строчка
    </li>
    <li>Када на мацони</li>
    <li>Пахлава</li>
    <li>
        Первая строчка
        <br />
        Вторая строчка
        <br />
        Третья строчка
    </li>
    <li>Лилибдж</li>
</ul>

Как все после <br /> уезжает на новую строчку. С <p> история аналогичная.

Как мне таким образом создать список, который будет выглядеть вот так?

Первая строчка                                            Первая строчка
Вторая строчка                                            Вторая строчка
Третья строчка       Када на мацони       Пахлава         Третья строчка          Лилибдж
  • html
  • css
ul.hr {
  list-style: none;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 4px;
}
ul.top {
    align-items: flex-start;
}
ul.hr li {
  margin-right: 5px;
  border: 1px solid #000;
  padding: 3px;
}
<ul>
    <li>
        Первая строчка
        <br />
        Вторая строчка
        <br />
        Третья строчка
    </li>
    <li>Када на мацони</li>
    <li>Пахлава</li>
    <li>
        Первая строчка
        <br />
        Вторая строчка
        <br />
        Третья строчка
    </li>
    <li>Лилибдж</li>
</ul>
<hr>
<ul>
<li>
    Первая строчка
    <br />
    Вторая строчка
    <br />
    Третья строчка
</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>
    Первая строчка
    <br />
    Вторая строчка
    <br />
    Третья строчка
</li>
<li>Лилибдж</li>
</ul>

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Горизонтальный список CSS –

Задавать вопрос

спросил

Изменено 3 года, 11 месяцев назад

Просмотрено 7к раз

Итак, я пытаюсь скопировать этот шаблон сайта: ссылка

Я хочу сделать элементы списка горизонтальными, как в приведенной выше ссылке, но это просто не работает с display:inline block , что я видел в Google и на этом форуме, я также пытался использовать float.

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

HTML:

 

<голова>
  <метакодировка="UTF-8" />
  <ссылка rel="stylesheet" href="test.css" />
  <название>название

<тело>
  <дел>
    
       
Белль и Кэрри
 
    
    реабилитационная йога
<ул>
  • Главная
  • О нас
  • Связаться с нами

  • CSS:

     тело {
  фон: #077054;
  цвет: #315f52;
}
.заголовок {
  выравнивание текста: по центру;
}
.заголовок {
  текстовое оформление: нет;
  цвет: #99fa99;
  размер шрифта: 20px;
  вес шрифта: нормальный;
  семейство шрифтов: "latoregular";
}
.header диапазон {
  цвет: #b6d8cf;
  размер шрифта: 26px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'nixie_oneregular';
}
. listHorizontal {
 цвет: #b6d8cf;
  размер шрифта: 30px;
  преобразование текста: верхний регистр;
  стиль списка: нет;
  дисплей: встроенный блок;
}
    • HTML
    • CSS

    1

    Вы можете сделать это следующим образом:

     body {
  фон: #077054;
  цвет: #315f52;
}

.заголовок {
  выравнивание текста: по центру;
}
.заголовок {
  текстовое оформление: нет;
  цвет: #99fa99;
  размер шрифта: 20px;
  вес шрифта: нормальный;
  семейство шрифтов: "latoregular";
}
.header диапазон {
  цвет: #b6d8cf;
  размер шрифта: 26px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'nixie_oneregular';

}

.listHorizontal {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
  цвет: #b6d8cf;
  размер шрифта: 30px;
  преобразование текста: верхний регистр;
  стиль списка: нет;
} 
     <дел>
     html">
       
    Белль и Кэрри
     
        
    реабилитационная йога