Question

如果我尝试对齐从无序列表创建的导航，它会与绝对右对齐，但它不会与左对齐。似乎导航文本左侧有20px左右的间隙。我拿出填充物看看是否还有差距，是的。我也想知道为什么我的第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并在你的nav ul中填充：0来解决这个问题。我有点dout你的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>

无法将导航对齐到左侧

2 个答案: