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

Html
6 Мар, 2021
0

Содержание

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

Вопрос задан 5 лет 2 месяца назад

Изменён 5 лет 2 месяца назад

Просмотрен 2k раз

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

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

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

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

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

Почта

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

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

Почта

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

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

html — CSS.

Как поставить список в одну строку?

Вопрос задан 2 года 1 месяц назад

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

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

Вроде поставил 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

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

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

Почта

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

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

Почта

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

Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?

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

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

Изменено 1 год, 9 месяцев назад

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

Мне это нужно, потому что я хочу, чтобы меню (созданное из HTML-списка) отображалось горизонтально.

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

Я также хотел бы убрать отступы подсписков. Является ли это возможным?

html
css
меню
позиционирование
horizontallist

Вам придется использовать что-то вроде ниже

 #меню ул{
  стиль списка: нет;
}
#меню ли{
  дисплей: встроенный;
}

 <дел>
  <ул>
    Первый пункт меню
    Второй пункт меню
    Третий пункт меню

Использование дисплея : inline-flex

 #menu ul {
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
  дисплей: встроенный гибкий
}

 <дел>
  <ул>
    1 пункт меню
    2 пункт меню
    3 пункта меню

Использование дисплея : встроенный блок

 #menu ul {
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
}

#меню ли {
  отображение: встроенный блок;
}

 <дел>
  <ул>
    1 пункт меню
    2 пункт меню
    3 пункта меню

довольно просто:

 ul. yourlist li { float:left; }

или

 ul.yourlist li { display:inline; }

Вы можете напрямую использовать встроенный стиль примерно так:

 
  А
  Б
  С
  Д

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

спросил 9 лет, 11 месяцев назад

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

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

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

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

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

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

HTML
CSS

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

 ул > ли {
    отображение: встроенный блок;
    /* Вы также можете добавить здесь немного полей, чтобы это выглядело красивее */
}

 <ул>
     какой-то элемент
    
     другой элемент

Эта скрипта показывает, как

http://jsfiddle.net/9th7X/

 ul, li {
    дисплей: встроенный
}

Отличные ссылки на списки и css здесь:

CSS Design: Taming Lists

Я думаю, что простое решение, которое я нашел, ниже

 ul{
    дисплей: гибкий;
}

Гораздо лучше использовать inline-block , потому что вам больше не нужно использовать clear:both в конце вашего списка.

Попробуйте это:

 
    
        какой-то элемент
    
    
        другой элемент

CSS:

 ул > ли {
    дисплей: встроенный блок;
}

Взгляните на это здесь: http://jsfiddle.net/shahverdy/4N6Ap/

Вы также можете использовать встроенные блоки, чтобы избежать плавающих элементов

 
    
        какой-то элемент
    
    
        другой элемент

, а затем стиль:

 li{
    /* с исправлением для IE */
    дисплей: встроенный;
    дисплей: встроенный блок;
    масштаб: 1;
    /*
    дополнительные стили, чтобы это выглядело красиво
    */
 }

таким образом вам не нужно будет ничего плавать, устраняя необходимость в очистке

сильный текс

 ул {
            стиль списка: нет;
            дисплей: гибкий;
            выравнивание содержимого: пространство вокруг;
        }

 <ул>
            бла
            блабла
            блаблабла

Здесь вы можете найти рабочий пример с некоторыми дополнительными предложениями по динамическому изменению размера списка.

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

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

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

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

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

html — CSS.

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

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

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

Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?

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

Опубликовать как гость

Опубликовать как гость

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

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

Рубрики

Рубрики