Question

为什么我的列表内容不完全集中在其容器中？我在#nav div中使用了 text-aline：center ，但似乎它仍然可能会考虑子弹，即使我用 list-style-使它们不可见型：无即可。我附上了截图。

这是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;
}

Answer 1

默认ul从左侧60px padding开始，您可以设置padding-left:0来执行此操作。

ul {
    padding-left: 0px;
}

Answer 2

在检查代码元素后，左边填充没有设置为0px，因此它向右移动，所有你需要做的就是添加padding-left：0px; 这里是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>

Answer 3

默认情况下，无序列表有一些填充，您可以在浏览器的检查工具中进行检查。只需删除那个填充。你的css会像..

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

Answer 4

为什么我的列表内容完全不在其容器中？那是因为你有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>

struct.unpack('f', struct.pack('I', 1155186688))[0]

居中列表内容

4 个答案: