css - 在 CSS、Dreamweaver 中使用导航菜单的字间距

Question

我对 Dreamweaver、CSS 和 HTML 还很陌生。因此，如果有任何明显的错误或解决方案，我深表歉意。

我正在尝试弄清楚如何在我的导航菜单中分隔单词。因为他们似乎总是居中。我试过添加“字间距”和其他调整，但无法找到解决方案。

只是想知道是否有人能够就如何解决此问题提供任何建议。

非常感谢任何帮助，

谢谢。

CSS

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  float: left;
  text-color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
  width: 100%;
}

HTML

<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>

Answer 1

从 li 中删除 width:100% 使菜单从左侧开始

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  float: left;
  color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
}
ul li + li{
  margin-left:10px;
}

<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>

或者您希望菜单从中心开始，从 li 中删除 float:left 并添加 display: inline-block

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
}

ul li + li{
  margin-left:10px;
}

<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>