Почему мои ссылки не отображаются в центре? - PullRequest
Новая
       0

Почему мои ссылки не отображаются в центре?

0 голосов
/ 31 марта 2020

я учусь html css, теперь я хочу создать панель навигации в качестве своей задачи. поэтому, когда я пытаюсь создать горизонтальную навигационную панель, мои меню не отображаются в центре моей навигационной панели div? почему его прикрепили с верхним углом? я хочу, чтобы они были в центре сверху и снизу, вот мой код, исправьте мою ошибку 

* {
  margin: 0;
  padding: 0;
}

nav {
  background-color: red;
}

ul {
  list-style: none;
  height: 35px;
  background-color: purple;
  width: 50%;
}

nav ul li {
  display: inline;
  padding: 10px;
  margin-top: 10px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li:hover {
  background-color: blue;
}
<nav>
  <ul>
    <li> <a href="">Home</a></li>
    <li> <a href="">About Us</a></li>
    <li> <a href="">Contact Us</a></li>
    <li> <a href="">Privacy Policy</a></li>
  </ul>
</nav>

Ответы [ 4 ]

1 голос
/ 31 марта 2020

Вот что вы можете сделать, вы можете использовать flex и настроить свой код при необходимости. 

body {
  margin: 0;
  padding: 0;
  justify-content: center;
  text-align: center;
  display: flex;
}

nav {
  background-color: red;
}

ul {
  justify-content: center;
  text-align: center;
  list-style: none;
  height: 35px;
  background-color: purple;
  width: 50%;
  display: flex;
  flex-direction: row;
}

ul li {
  margin-top: 10px;
}

ul li a {
  text-decoration: none;
  color: black;
  padding: 5px;
}

ul li:hover {
  background-color: blue;
}
<ul>
  <li> <a href="">Home</a></li>
  <li> <a href="">About Us</a></li>
  <li> <a href="">Contact Us</a></li>
  <li> <a href="">Privacy Policy</a></li>
</ul>
0 голосов
/ 31 марта 2020

Вам необходимо добавить 

test-align: center;

к элементу ul в css.

0 голосов
/ 31 марта 2020

Я добавил Отображение: встроенный блок для li и ul и выравнивание текста: по центру для навигации. и это сделает margin-top работ. 

* {
  margin: 0;
  padding: 0;
}

nav {
  text-align: center
}

ul {
  list-style: none;
  height: 35px;
  background-color: purple;
  width: 50%;
  display: inline-block
}

nav ul li {
  display: inline-block;
  padding: 10px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li:hover {
  background-color: blue;
}
<nav>
  <ul>
    <li> <a href="">Home</a></li>
    <li> <a href="">About Us</a></li>
    <li> <a href="">Contact Us</a></li>
    <li> <a href="">Privacy Policy</a></li>
  </ul>
</nav>

проверьте здесь: https://jsfiddle.net/w3hn1L95/

0 голосов
/ 31 марта 2020

Здесь исправьте код, а также я приложил базовый c пример учебного пособия по разделу .. пожалуйста, просмотрите его .. Базовый c URL-адрес операции div: https://uwebsitelayout.blogspot.com/

enter image description here

<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}

nav {
  background-color: red;
}

ul {
  list-style: none;
  height: 35px;
  background-color: purple;
  width: 50%;
  margin-left: 25%;
}

nav ul li {
  display: inline;
  padding: 10px;
  margin-top: 10px;
  margin-left: 8%;
}

nav ul li a {
  text-decoration: none;
  color: aliceblue;
}

nav ul li:hover {
  background-color: blue;
}
</style>
<body>
<nav>
  <ul>
    <li> <a href="">Home</a></li>
    <li> <a href="">About Us</a></li>
    <li> <a href="">Contact Us</a></li>
    <li> <a href="">Privacy Policy</a></li>
  </ul>
</nav>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...