在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

从width:100%移除li，因此菜单从左侧开始

.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>

或者您希望菜单从中心开始从float:left移除li并添加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>