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

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

ul {
    padding: 0;
}

Answer 2

首先，您会丢失以div id ='wrapper'结尾的信息。

第二，这是我建议格式化CSS的建议-切勿编写类或id，然后在方括号中放入值即可。

喜欢

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

使用一些空格并在其中保持常数会更好。.像ul元素后的4x空格-像这样：

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

此外，我们的UL不需要具有裕量上限：0 如果您不希望身体和导航栏之间有任何间隔，最好放上top：0 ...

你有很多错误，但是实践使你很完美。

HTML代码格式正确。我也建议您用CSS编写注释，有时也用HTML编写注释。因为在大页面上，您会忘记自己在做什么和曾经在做什么。

overflow:hidden -- this overflow missing ;

对不起，我的英语。只需用id ='Wrapper'关闭div元素，就可以了：）

Answer 3

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

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

3 个答案: