居中列表内容

为什么我的列表内容不能完全集中在它的容器中？我用文本艾琳：中心在#nav DIV，但它好像它可能仍然服用子弹进去，即使我让他们与列表样式类型无形：无。我附上了截图。居中列表内容

这里的HTML：

<div id="nav"> 
    <h2>Sonnet Index</h2> 
    <ul> 
     <li><a href="#">Book #1</a></li> 
     <li><a href="#">Book #2</a></li> 
     <li><a href="#">Book #3</a></li> 
     <li><a href="#">Book #4</a></li> 
     <li><a href="#">Book #5</a></li> 
    </ul> 
</div>

CSS：

#nav { 
    background-color: #ACCCFF; 
    float: left; 
    width: 200px; 
    height: 410px; 
    text-align: center; 
} 

ul { 
    list-style-type: none; 
}

来源

2017-02-21 smontoro14

bydefault ul采取60px padding从左至右，你可以这样做的设定padding-left:0。

ul { 
    padding-left: 0px; 
}

来源

2017-02-21 06:14:12

检查你的代码的元素后，左填充未设置为0像素，因此它是对右移，所有你需要做的就是添加填充左：0像素; 这里是fiddle和代码以及

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    padding-left: 0px; 
 
    list-style-type: none; 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>

来源

2017-02-21 06:18:51 warl0ck

无序列表默认情况下，有一些填充，你可以在浏览器中检查工具检查。只是删除填充。你的CSS就会像..

ul { 
    list-style-type: none; 
    padding-left:0px; 
}

来源

2017-02-21 06:22:28

为什么我的列表内容完全在其容器的中心？嗯，这是因为你有not changed default properties of ul tag，他们是如下，

ul { 
display: block; 
list-style-type: disc; 
margin-top: 1em; 
margin-bottom: 1 em; 
margin-left: 0; 
margin-right: 0; 
padding-left: 40px; 
}

只要你改变它的padding:0你#nav text-align:center工作正常，并在中心对齐。

#nav { 
 
    background-color: #ACCCFF; 
 
    float: left; 
 
    width: 200px; 
 
    height: 410px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding:0px; /*Add this*/ 
 
}

<div id="nav"> 
 
    <h2>Sonnet Index</h2> 
 
    <ul> 
 
     <li><a href="#">Book #1</a></li> 
 
     <li><a href="#">Book #2</a></li> 
 
     <li><a href="#">Book #3</a></li> 
 
     <li><a href="#">Book #4</a></li> 
 
     <li><a href="#">Book #5</a></li> 
 
    </ul> 
 
</div>

来源

2017-02-21 07:06:55 frnt

@ smontoro14希望这个作品。 – frnt

居中列表内容

回答

相关问题