字间距问题答案

【问题标题】：Issues with Word Spacing字间距问题
【发布时间】：2018-10-15 12:29:51
【问题描述】：

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

我刚刚意识到 list-style-type: 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>

【问题讨论】：

标签： html css

【解决方案1】：

padding-left 可以正常工作。

      .nav-wrapper a {
        float: right;
        order:1;
        text-decoration:none;
        padding-left:10px;
      }

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Google</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      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;
        order:1;
        text-decoration:none;
        padding-left:10px;
      }


    </style>
  </head>

  <body>
    <nav>
      <div class="nav-wrapper">
        <ul>
          <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="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.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>
  </body>

</html>

【讨论】：

【解决方案2】：

不需要：

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

只做：

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

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

【讨论】：

【解决方案3】：

在这种情况下，您应该使用margin CSS 属性而不是word-spacing。结束 CSS 规则如下所示：

.nav-wrapper a {
   float: right;
   list-style-type: none;
   margin-left: 15px;
}

【讨论】：