Question

我已经尝试了一切！是什么导致这种缩进？这主要是一个Team Treehouse课程项目，我将其复制并粘贴到Atom中进行工作。从Treehouse工作区预览时，压痕消失得很好。

https://i.stack.imgur.com/Jmd9Q.png

无论如何，显然我会在某个时候遇到这个问题，我只想了解发生了什么事

.name {
  font-size: 1.25em;
}

.name,
.main-nav li {
  text-align: center;
  background-color: #fff;
  padding: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.main-nav a {
  font-size: .95em;
  color: #3acec2;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #093a58;
}


/* ---- Layout Containers ---- */

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  background: #3acec2;
  margin-bottom: 30px;
}


/*=================================
          Media Queries
        ==================================== */

@media (min-width: 769px) {
  .wrap {
    min-height: calc(100vh - 89px);
  }
  .container {
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
  }
  .name,
  .main-nav li {
    display: inline;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Best City Guide</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="superlordstylesheet.css">
</head>

<body>
  <div class="wrap">

    <header class="main-header">
      <div class="container">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
          <li><a href="#">ice cream</a></li>
          <li><a href="#">donuts</a></li>
          <li><a href="#">tea</a></li>
          <li><a href="#">coffee</a></li>
        </ul>
      </div>
    </header>

    <div class="container">

      <div class="primary col">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for.</p>
        <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
      </div>
      <!--/.primary-->

      <div class="secondary col">
        <h2>Great food</h2>
        <p>Croissant macaroon pie brownie. /p>
          <p> Fruitcake jelly-o croissant souffl&#233;. </p>
      </div>
      <!--/.secondary-->

    </div>
    <!--/.container-->

  </div>
  <!--/.wrap-->

  <footer class="main-footer">
    <span>&copy;2015 Residents of The Best City Ever.</span>
  </footer>
</body>

</html>

Answer 1

默认情况下，UL在左侧具有填充。您可以通过将其填充为0来对此进行调整：

.name {
  font-size: 1.25em;
}

.main-nav {
  padding-left: 0px;
}

.name,
.main-nav li {
  text-align: center;
  background-color: #fff;
  padding: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.main-nav a {
  font-size: .95em;
  color: #3acec2;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #093a58;
}


/* ---- Layout Containers ---- */

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  background: #3acec2;
  margin-bottom: 30px;
}


/*=================================
      Media Queries
    ==================================== */

@media (min-width: 769px) {
  .wrap {
    min-height: calc(100vh - 89px);
  }
  .container {
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
  }
  .name,
  .main-nav li {
    display: inline;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Best City Guide</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="superlordstylesheet.css">
</head>

<body>
  <div class="wrap">

    <header class="main-header">
      <div class="container">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
          <li><a href="#">ice cream</a></li>
          <li><a href="#">donuts</a></li>
          <li><a href="#">tea</a></li>
          <li><a href="#">coffee</a></li>
        </ul>
      </div>
    </header>

    <div class="container">

      <div class="primary col">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for.</p>
        <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
      </div>
      <!--/.primary-->

      <div class="secondary col">
        <h2>Great food</h2>
        <p>Croissant macaroon pie brownie. /p>
          <p> Fruitcake jelly-o croissant souffl&#233;. </p>
      </div>
      <!--/.secondary-->

    </div>
    <!--/.container-->

  </div>
  <!--/.wrap-->

  <footer class="main-footer">
    <span>&copy;2015 Residents of The Best City Ever.</span>
  </footer>
</body>

</html>

是什么导致显示内联时标题中的导航缩进？

1 个答案: