html - 字间距问题

我正在尝试重新创建Google的主页，以尝试提高我的基本技能。我正在尝试将文字间距应用于导航栏中的链接（Gmail和图片），但无法正常工作。谁能指出我要去哪里了？

我刚刚意识到列表样式类型：none;也没有改变任何东西。

html {
  width: 100%;
  padding: 0;
  margin: 0;
}

.mainSection {
  text-align: center;
  margin-top: 10%;
}

input {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1%;
  border: none;
  padding: 10px;
  width: 500px;
  border: 1px solid lightgray;
  outline: none;
  font-size: 20px;
  font-weight: lighter;
  box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}

button {
  outline: none;
  margin-top: 3%;
  display: inline-block;
  width: 150px;
  height: 35px;
  border: 1px solid #eaeaea;
  outline: none;
  background-color: #f2f2f2;
  color: #636363;
  font-weight: bold;
}

.divider {
  width: 10px;
  display: inline-block;
}

.nav-wrapper {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-wrapper a {
  float: right;
  list-style-type: none;
  word-spacing: 30px;
}

<nav>
  <div class="nav-wrapper">
    <a href="#" class="gmail">Gmail</a>
    <div class="dividerTwo"></div>
    <a href="#" class="images">Images</a>
    <!-- Add sign-in button here -->
    </ul>
  </div>
</nav>
<main>
  <div class="mainSection">
    <img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
    <div id="search">
      <input type="text">
      <button id="Search" href="#">Google Search</button>
      <div class="divider"></div>
      <button id="Lucky" href="#">I'm Feeling Lucky</button>
    </div>
  </div>
</main>

最佳答案

不需要：


字间距
<div class="dividerTwo"></div>。



只做：


在.nav-wrapper a周围应用一些填充


 

.nav-wrapper a {
  float: right;
  list-style-type: none;
  padding:0 .5em;
}

关于html - 字间距问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52816834/