如何将所有 li 元素移动到 <ul> 元素的左侧？

Question

我想将所有 li 元素移动到 ul 元素的左侧。看起来第一个 li 元素的左边距 >0，我不明白。

你知道我该如何解决这个问题吗？

最终目标是：页脚中第一个li元素#music和#email元素的左外边距相同，均为70px（与左边框的距离相同）。

html,
body {
  margin: 0;
  text-align: center;
}

header {
  overflow: hidden
}

nav {
  overflow: hidden;
  display: inline-block;
  float: left;
  margin-left: 70px;
}

nav li {
  margin-right: 70px;
  float: left;
}

nav ul {
  list-style: none;
  overflow: hidden
}

#email {
  float: left;
  padding: 25px 0px;
  margin-left: 70px;
}

.wrapper {
  border: 2px solid green;
}

#menu2 {
  float: right;
  margin-right: 70px;
  border: 2px solid green;
}

ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

<div class="wrapper">
  <header>
    <nav id="menu">
      <ul>
        <li id="music">
          <a href="#"><img src="gfx/music40.gif"></a>
        </li>
        <li id="film">
          <a href="#"><img src="gfx/film40.gif"></a>
        </li>
        <li id="visual">
          <a href="#"><img src="gfx/visual40.gif"></a>
        </li>
        <li id="media">
          <a href="#"><img src="gfx/media40.gif"></a>
        </li>
      </ul>
    </nav>
    <div id="menu2">
      <a id="logo" href="index.html"><img src="gfx/tobera40.gif" alt="logo" class="logo"></a>
    </div>
  </header>

  <div id="main">
    <img src="gfx/banner40.jpg">
  </div>


  <footer>
    <div id="email">
      <img src="email.jpg">
    </div>
  </footer>
</div>

Answer 1

首先你错过了关闭 div id='wrapper'.

其次，这是我对 CSS 格式的建议 - 不要写 class 或 id，然后在打开括号后将值放在它下面。

像这样

 ul{
  margin-top:0px;
  margin-bottom:0px;
  }

使用一些 spaces 并在其中保持不变对你来说更好..就像 ul 元素之后的 4x spaces - 像这样：

ul {
    margin-top:0px;
    margin-bottom:0px;
}

你的 UL 也不需要有 margin-top: 0 如果您不想在正文和导航栏之间放置任何 space，最好放置 top:0...

你有很多错误，但熟能生巧。

HTML 代码格式很好。另外，我建议您在 CSS 中写评论，有时也在 HTML 中写评论。因为使用大页面，您会忘记自己在做什么和过去是什么。

overflow:hidden -- this overflow missing ;

对不起我的英语。只需关闭 id='Wrapper' 的 div 元素，仅此而已:)

Answer 2

您可以将 padding: 0 添加到 ul 元素以强制它粘在父 nav 元素的左边框上。

Answer 3

ul 上的填充将您的 li 项目推到右边。由于#email 和 nav 都缩进了 70px，唯一的区别是 ul 上的填充。尝试添加：

ul {
    padding: 0;
}

如何将所有 li 元素移动到 <ul> 元素的左侧？

How to move all li elements to the left side of the <ul> element?

html

css

margin

padding

html-lists