Как бы вы исправили панель навигации, которая отображается в виде списка?

Когда я пытаюсь создать панель навигации, я хочу, чтобы она плавала вправо, но когда я это делаю, элементы < li > отображаются вертикально, когда я хочу, чтобы они были горизонтальными.

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  /*position: fixed;*/
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
}
#navigation a{
  text-align: center;
}

<header>
      <nav id = "navigation">
        <ul>
          <li>
            <a href = "./entry.html"><h3>Home</h3></a>
            <a href = "#"><h3>About</h3></a>
            <a href = "#"><h3>Timeline</h3></a>
            <a href = "#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

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

— 15.02.2019 18:26

добавьте display:inline-block к вашему <li>, и это должно сработать.

— 15.02.2019 18:26

Этот код не работал, когда я его добавил

— 15.02.2019 18:28

html css

15.02.2019 18:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

230

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Элементы li имеют отображение по умолчанию list-item, которое складывается как элементы block. Если вы добавите display: inline; к своим элементам li и display: inline-block; или display: inline; к своим якорным тегам внутри li, ваши пункты меню должны отображаться горизонтально.

Неважно, это была моя вина, я должен был добавить отдельный <li> извините!

— 15.02.2019 18:34

15.02.2019 18:27

Ответ принят как подходящий

У вас есть куча блочных элементов, которые складываются по умолчанию. Так что сделайте все li, a, h3 отображаемыми: встроенными или встроенными блоками. Кроме того, добавьте ширину к UL, так как «плавающий» заставляет его сворачиваться по ширине содержимого.

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  width: 100%;
  text-align: right;
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
  display:inline-block;
}
#navigation a{
  text-align: center;
}
#navigation a, #navigation h3 {
  display:inline;
}

<header>
      <nav id = "navigation">
        <ul>
          <li>
            <a href = "./entry.html"><h3>Home</h3></a>
            <a href = "#"><h3>About</h3></a>
            <a href = "#"><h3>Timeline</h3></a>
            <a href = "#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

Кроме того, это слишком сложно с точки зрения разметки. Раньше считалось, что размещение навигации в неупорядоченном списке было способом сделать его семантическим, но элемент Nav HTML5 может сделать это за вас. Лучший способ будет выглядеть так:

nav {
  font-size: 14px;
  font-family: sans-serif;
  text-align: right;
}
nav a {
  margin-left: 10px;
  padding: 5px;
  display: inline-block;
}

<nav>
    <a href = "#">Home</a>
    <a href = "#">About</a>
    <a href = "#">Timeline</a>
    <a href = "#">Video</a>
</nav>

15.02.2019 18:32

Попробуйте вставить display: inline; на элемент.

#navigation ul li h3 {
 font-weight: normal;
 font-size: 34px !important;
 color: #000;
 margin-right: auto;
 float:right;
 padding: 0;
 margin: auto;
 letter-spacing: 0.25px;
 display:inline;

}

15.02.2019 18:32

Вам нужно создать отдельные строки для этих элементов. Измените свой HTML на этот

<header>
    <nav id = "navigation">
        <ul>
            <li class = "menuItem">
                <a href = "./entry.html">
                    <h3>Home</h3>
                </a>
            </li>
            <li class = "menuItem">
                <a href = "#">
                    <h3>About</h3>
                </a>
            </li>
            <li class = "menuItem">
                <a href = "#">
                    <h3>Timeline</h3>
                </a>
            </li>
            <li class = "menuItem">
                <a href = "#">
                    <h3>Video</h3>
                </a>
            </li>
        </ul>
    </nav>
</header>

И добавьте это в свой css

#navigation ul{
  display: flex;
  width:100%;
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;


  /*position: fixed;*/

    }
    .menuItem {
        padding: 10px;
    }

Вы можете изменить обивку в соответствии с тем, как вам нравится

Спасибо, я забыл это сделать!

— 15.02.2019 18:46

15.02.2019 18:35