Попытка равномерно распределить эти навигационные ссылки и расположить их по центру страницы. Мне удалось расположить ul по центру страницы, но я не уверен, как центрировать ссылки.

Я предполагаю, что это что-то в li, что мне нужно изменить, но не уверен, что ..

ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 50%;
}

li {
  float: left;
  padding-left: 50px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover {
  background-color: red;
  text-decoration: underline;
}
<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Store</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
0
matt.mcg 2 Май 2019 в 08:06

5 ответов

Лучший ответ

Попробуйте использовать flex, вы также можете добавить другие вещи, которые вы хотите, такие как стиль списка и цвет фона. Посмотрите эту ссылку fam. Измени свою жизнь.

ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
2
Spencerish 2 Май 2019 в 05:21
<nav id="nav_tag">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

#nav_tag{
         text-align:center;
         margin-left:{appropriate amount}%;
        }
0
Ajay K Sunny 2 Май 2019 в 07:35

Вам не нужно сильно менять, просто удалите это:

li {
  float: left;
  padding-left: 50px;
}
-1
Mohamed Benkedadra 2 Май 2019 в 05:23

попробуйте ниже css:

ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 50%;
  display: flex;
flex-wrap: wrap;
        justify-content: center;
}

li {
  float: left;
  padding-left: 25px;
  padding-right: 25px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover {
  background-color: red;
  text-decoration: underline;
}
<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Store</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
-2
AddWeb Solution Pvt Ltd 2 Май 2019 в 05:36

Используйте grid, чтобы легко сделать это. Вот скрипка

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
1
Becky 2 Май 2019 в 05:30