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>