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

alexxlab

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

Вопрос задан

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

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

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

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

  • 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 (jsp)

Ниже пример кода в jsp.

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

Но как в jsp (html) сделать так, чтобы картинки печатались горизонтально?

<div>
        <div>
            <c:forEach items="${allProducts}" var="product">
                <img src="/product/image?fileName=${product.picture}">
                <li> ${product.name}<a href="/getProductById?id=${product.id}">get</a>
            <h4>Ut eu feugiat</h4>
                </li>
            </c:forEach>
        </div>
    </div>

  • css
  • html5

Расположение изображений на странице не относится ни к Java, ни к JSP. Это вопрос выбора правильных тегов, их относительного расположения и стилей.

.product_gallery div {
  display: inline-block;
  text-align: center;
  width: 145px;
}
<div>
  <div>
    <div>
      <img src="https://i.stack.imgur.
 
 
 com/O2yQ0.png">
      <span>Ut eu feugiat</span>
    </div>
    <div>
      <img src="https://i.stack.imgur.com/O2yQ0.png">
      <span>Ut eu feugiat</span>
    </div>
    <div>
      <img src="https://i.stack.imgur.com/O2yQ0.png">
      <span>Ut eu feugiat</span>
    </div>
  </div>
</div>

У вас используется блочный тег h4, который всегда занимает всю ширину родительского блока, и почему-то используются теги элемента списка (li) без самого списка (ul/ol). Они и мешают изображениям выстроится в одной строке.

5

Просто родителю задай display: flex; и если нужно равномерно распределить пространство между картинками то еще и justify-content: space-between/around;

1

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

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

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

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

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

Почта

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

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

Почта

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

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

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

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

спросил

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

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

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

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

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

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

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

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

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

    3

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

     #menu ul {
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
  дисплей: встроенный гибкий
} 
     <дел>
  <ул>
    
  • 1 пункт меню
    • 
    
  • 2 пункт меню
    • 
    
  • 3 пункта меню
    •