Question

与下面的内容相比，导航顶部会进一步移动到页面中。我无法弄清楚为什么会这样做。这几乎就像导航具有强制进一步填充的填充。我只是编辑了这篇文章来显示文件的HTML和CSS。对不起！

<nav>

<div class="wrap">

  <div class="fl">

    <ul>

      <li>Supplement Tips</li>
      <li>Workout Routines</li>

    </ul>

  </div><!--fl-->

  <div class="fr">

    <a href="#"></a>

  </div><!--fr-->

</div><!--wrap-->

<div class="wrap">

  <div class="contentBlock">

CSS

  .wrap {
  margin: 0 auto;
  max-width: 65%;
}
    nav {
  background: #FFF;
  border-bottom: #E4EAEA 1px solid;
  box-shadow: 0 1px 0 0 #E4EAEA, 0 2px 4px 0 rgba(0,0,0,0.05);
  font-size: 14px;
  height: 60px;
}
nav ul li {
  display: inline;
  float: left;
  list-style-type: none;
  padding-right: 40px;
  padding-top: 8px;
  opacity: .5;
}

/* Content */

.contentBlock {
  background: #FFF;
  border: #E4EAEA 1px solid;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
  margin-top: 40px;
}
.contentHeader {
  padding: 24px 32px 24px 32px;
  border-bottom: #E4EAEA 1px solid;
}
.contentMain {
  padding: 0 32px 0 32px;
}

Answer 1

空格是由padding上的默认<ul>引起的。您可以将其设置为padding-left: 0;，以使导航链接左对齐。

以下是chrome中的<ul>的默认css：

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

为什么我的CSS包装器会产生不同的宽度，具体取决于它包含哪些元素？

1 个答案: