无法将导航左对齐

Question

如果我尝试对齐从无序列表创建的导航，它会绝对右对齐，但不会左对齐。我的导航文本左侧似乎有 20 像素左右的间隙。我拿出我的填充物看看是否还有差距，是的。我还想知道为什么我的第 1 列与其他 2 不同，位于其列的底部。提前致谢。

这是我的代码： HTML5

nav{
 display: block;
 background: #007845;
 height: 25px;
 width: 100%;
}
nav ul{
 /*This effects only the ul within the nav; NO OTHER LISTS*/
 /*The next two lines send the text to the left edge*/
 margin: 0px;
}
nav ul li{
 /*This effects only the li within the ul within the nav; NO OTHER LISTS*/
 list-style: none;
 float: left;
 margin: 0px;
}
nav ul li a{
 /*This effects only the a link within the li within the ul within the nav; NO OTHER LISTS*/
 text-decoration: none;/*Gets rid of the underline*/
 float: left;
 display: block;
 color: black;
}
#container p{
 text-align: left;
 vertical-align: top;
}
#container{
 margin: 0px;
 width: 100%;
 -moz-column-count: 3;
 -moz-column-gap: 1em;
 -moz-column-rule: 1px solid black;
 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
 -webkit-column-rule: 1px solid black;
 column-count: 3;
 column-gap: 1em;
 column-rule: 1px solid black;
}

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" style="text/css" href="ThreeColumns.css">
 </head>
 <body>
  <nav>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Photo</a></li>
    <li><a href="">Graphic</a></li>
   </ul>
  </nav>
  <div id="container">
    <p>Column 1</p>
    <p>Column 2</p>
    <p>Column 3</p>
  </div><!--End Container-->
 </body>
</html>

Answer 1

这是想要的结果吗？我已将 padding: 0 设置为 nav ul，将 margin: 0 设置为 #container p

nav {
  display: block;
  background: #007845;
  height: 25px;
  width: 100%;
}
nav ul {
  /*This effects only the ul within the nav; NO OTHER LISTS*/
  /*The next two lines send the text to the left edge*/
  margin: 0px;
  padding: 0;
}
nav ul li {
  /*This effects only the li within the ul within the nav; NO OTHER LISTS*/
  list-style: none;
  float: left;
  margin: 0px;
}
nav ul li a {
  /*This effects only the a link within the li within the ul within the nav; NO OTHER LISTS*/
  text-decoration: none;
  /*Gets rid of the underline*/
  float: left;
  display: block;
  color: black;
}
#container p {
  text-align: left;
  margin: 0;
}
#container {
  margin: 0px;
  width: 100%;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 1em;
  column-rule: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" style="text/css" href="ThreeColumns.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="">About</a>
      </li>
      <li><a href="">Photo</a>
      </li>
      <li><a href="">Graphic</a>
      </li>
    </ul>
  </nav>
  <div id="container">
    <p>Column 1</p>
    <p>Column 2</p>
    <p>Column 3</p>
  </div>
  <!--End Container-->
</body>

</html>

Answer 2

您可以通过在您的容器 p 中放置 margin:0 并在您的导航 ul 中放置 padding:0 来解决此问题。我把你的 ul 间隔了一点

nav {
    display: block;
    background: #007845;
    height: 25px;
    width: 100%;
    float:left;
}
nav ul {
    /*This effects only the ul within the nav; NO OTHER LISTS*/
    /*The next two lines send the text to the left edge*/
    margin: 2px;
    padding:0;
}
nav ul li {
    /*This effects only the li within the ul within the nav; NO OTHER LISTS*/
    list-style: none;
    display:inline-block;
    margin: 0px;
    padding-right:10px;
}
nav ul li a {
    /*This effects only the a link within the li within the ul within the nav; NO OTHER LISTS*/
    text-decoration: none;
    /*Gets rid of the underline*/    
    display: inline-block;
    color: black;
}

#container {
    margin: 0px;
   min-width: 100%;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -moz-column-rule: 1px solid black;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    -webkit-column-rule: 1px solid black;
    column-count: 3;
    column-gap: 1em;
    column-rule: 1px solid black;
}
#container p {
    text-align: left;
    vertical-align: top;
    margin:0;
    padding:0;
    min-width:33%;
   
}

<body>
    <nav>
        <ul>
            <li><a href="">Home</a>
            </li>
            <li><a href="">About</a>
            </li>
            <li><a href="">Photo</a>
            </li>
            <li><a href="">Graphic</a>
            </li>
        </ul>
    </nav>
    <div id="container">
        <p>Column 1</p>
        <p>Column 2</p>
        <p>Column 3</p>
    </div>
    <!--End Container-->
</body>

无法将导航左对齐

Unable to Align a Nav to the Left

html

css

alignment

nav