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

问题

I want to move all li elements to the left side of the ul element. It looks like the first li element has a left margin >0 which I don't understand.

Do you know how I can fix this?

The ultimate goal is: the first li element #music and #email element in the footer have the same left margin of 70px (same distance from the left border).

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>

回答1:

The padding on the ul pushes your li items over to the right. Since #email and nav are both indented 70px the only difference is the padding on the ul. Try adding:

ul {
    padding: 0;
}

回答2:

You can add padding: 0 to the ul element to force it to stick to the left border of the parent nav element.

回答3:

First of all you are missing closing on div id='wrapper'.

Second this is my advice for formating ur CSS - Never write class or id then after opening brackets you put values beneeth it.

Like this

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

Its much better for you to use some spaces and to be constant in it.. like 4x spaces after ul element - Like this :

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

Also ur UL dont need to have margin-top: 0 its just better to put top:0 if u dont want any space between body and nav bar...

U have a lot of mistakes but practice makes u pefect.

HTML code is formated nicely. Also i suggest you to write comments in CSS and also sometimes in HTML. Because with big page you will forget what you are doing and were.

overflow:hidden -- this overflow missing ;

Sorry for my english. Just close div element with id='Wrapper', thats all:)

来源：https://stackoverflow.com/questions/51294408/how-to-move-all-li-elements-to-the-left-side-of-the-ul-element