Question

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

我刚刚意识到list-style-type：没有；也没有改变任何东西。

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>

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

Answer 2

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

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

Answer 3

不需要：

单词间距
<div class="dividerTwo"></div>。

只做：

在.nav-wrapper a

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

字间距问题

3 个答案: