Текст в навигационной панели не центрируется и не покрывает текст

Question

У меня есть страница html, которая «содержит» много страниц, что означает, что у меня есть ссылки вверху страницы, но когда они нажимаются, вы фактически не переходите на новую страницу. Ссылки остаются на той же странице, но просто ведут на другую часть той же страницы html. (Я думаю, это называется макет одной страницы с несколькими страницами, я забыл). Моя страница разделена на 4 раздела, а первый раздел под панелью навигации содержит наименьшее количество текста. Я не уверен почему, но навигационная панель обрезает мой текст p-тега. Похоже, что текст находится под панелью навигации.

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

Я пробовал такие вещи, как отступы, поля и выравнивание текста, но у меня все еще есть проблемы с этими двумя вещами. Может кто-нибудь помочь мне? Спасибо.

Код:

    nav {
        width: 100%;
        background: #1B2631;
        overflow: hidden;
        position: fixed;
        top: 0;
    }

    ul {

        list-style: none;
    }

    li {
        text-align: center;
        float: left;


    }

<nav>
    <ul>
        <li><a href="#page1">page1</a>
        </li>
        <li><a href="#page2">page2</a>
        </li>
        <li><a href="#page3">page3</a>
        </li>
        <li><a href="#page4">page4</a>
        </li>
        <li><a href="#page5">page5</a>
        </li>
    </ul>
</nav>

Answer 1

Я сделал ul в вашем nav родителем flexbox, а затем центрировал содержимое с помощью justify-content: center. Для внутренних «страниц» я дал каждому верхний отступ, чтобы он очищал высоту фиксированного меню nav.

Еще несколько объяснений. Следующий блок предназначен для элементов section, которые являются прямыми потомками класса pages. Я сделал это таким образом, чтобы вложенные section s не были выбраны случайно.

.pages>section {
  padding: 3em 1em 2em;
}

Следующее, что нужно объяснить, это этот блок. Он удаляет нижнее поле из последних p в длинном списке p s, который я включил в разделы. Так выглядит интервал внизу каждого section.

.pages p:last-child {
  margin-bottom: 0;
}

Вот возможная реализация этого.

html {
  scroll-behavior: smooth;
}

.pages>section {
  padding: 3em 1em 2em;
}

.pages p:last-child {
  margin-bottom: 0;
}

#page1 {
  background-color: yellow;
}

#page2 {
  background-color: red;
}

#page3 {
  background-color: gray;
}

#page4 {
  background-color: purple;
}

#page5 {
  background-color: orange;
}

nav {
  width: 100%;
  /*       background: #1B2631; */
  background: #ccc;
  overflow: hidden;
  position: fixed;
  top: 0;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul a {
  padding: 0 1em;
}


body {
  margin: 0;
  font-family: sans-serif;
}

<nav>
  <ul>
    <li><a href="#page1">page1</a>
    </li>
    <li><a href="#page2">page2</a>
    </li>
    <li><a href="#page3">page3</a>
    </li>
    <li><a href="#page4">page4</a>
    </li>
    <li><a href="#page5">page5</a>
    </li>
  </ul>
</nav>


<div class="pages">

  <section id="page1">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page2">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page3">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page4">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page5">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>


</div>

jsFiddle

Answer 2

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

nav {
  width: 100%;
  background: #1B2631;
  overflow: hidden;
  position: fixed;
  top: 0;
}

ul {
  list-style: none;
  text-align: center;
}

li {
  text-align: center;
  float: none;
  display: inline-block;
  padding: 5px 15px;
}

<nav>
  <ul>
    <li><a href="#page1">page1</a>
    </li>
    <li><a href="#page2">page2</a>
    </li>
    <li><a href="#page3">page3</a>
    </li>
    <li><a href="#page4">page4</a>
    </li>
    <li><a href="#page5">page5</a>
    </li>
  </ul>
</nav>