个人中心
gpt4 book ai didi

html - 是什么导致我的标题中的 nav ul 在显示内联时缩进？

转载 作者：行者123 更新时间：2023-11-28 00:46:00 24 4
gpt4 key购买 nike

我什么都试过了!是什么导致了这个缩进？这主要是一个 Team Treehouse 类(class)元素，我将其复制并粘贴到 Atom 中进行处理。从 Treehouse 工作区预览时，缩进消失得很好......

/image/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>

最佳答案

默认情况下，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>

关于html - 是什么导致我的标题中的 nav ul 在显示内联时缩进？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53529956/

24 4 0
文章推荐： javascript - 如何更改暂停的 html5 视频的当前时间并从该位置开始播放？
文章推荐： javascript - ".get()"函数是否被视为请求？
文章推荐： javascript - Highcharts - 嵌套切片圆环图
文章推荐： html - 使用\f004 将 CSS 中的元素符号项更改为 fa fa-heart
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com