Question

我有一个问题，我不知道如何解决它，我真的是一个初学者。我正在尝试制作导航栏并减少导航点之间的间距，但我是如此不成功。这就是我所拥有的：my menu

我希望减少它之间的香料，并且有类似的东西：

Answer 1

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}

＆＃13;

<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

＆＃13;

https://jsfiddle.net/nmttg009/

CSS水平导航栏

1 个答案: