1

以下 ul 是左对齐的，我试图将其置于 #category_list div 的中心，但我似乎无法正确处理。

我认为问题在于 ul 没有环绕其内容，而是扩展到全宽。

我在这里想念什么？

谢谢你的帮助。

<html>
<head>
    <style>


    #category_list {
        padding: 1em 0 2em;
        text-align:center;
        border: 1px solid red;
    }

    #category_list ul{
        padding: 0;
        display:inline-block;
        text-align: left;
        border: 1px solid red;
        margin: 0 auto;
    }

    #category_list li{
        display:inline-block;
        width: 13.75em;
        padding: 1em 0;
        margin: 0 .5em 1em;
        border-bottom: 1px solid #aaaaaa;
    }

    #category_list h2{
        text-align: left;
        margin: 0;
        font: 1em "Georgia", Serif;
        font-style: italic;
    }
    </style>
</head>


<body>
    <div id="category_list">
        <ul>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        </ul>
    </div>
</body>
</html>

http://s17.postimage.org/xa0am2crj/centreleftlist.jpg

4

3 回答 3

2

试试这个（jsFiddle）编辑：（最接近的版本：这里）：

#category_list ul{
    padding: 0;
    display:inline-block;
    border: 1px solid red;
    margin: 0 auto;
}

#category_list li{
    display:inline-block;
    width: 13.75em;
    text-align: left;
    padding: 1em 0;
    margin: 0 .5em 1em;
    border-bottom: 1px solid #aaaaaa;
}

基本上text-align: left是从 ul -> li 移动的。

于 2012-12-07T22:13:16.287 回答
2

除非您指定宽度，否则 ul 将扩展到其容器的宽度：

#category_list ul {
  width: 80%;
  margin: 0 auto;
}
于 2012-12-08T00:03:56.883 回答
1

好的，所以实现我所追求的效果的最佳方法是使用百分比和媒体查询修改 li 宽度，而不是试图让 ul 宽度正常工作。

所以是这样的：

#category_list {
    padding: 1em 0 2em;
    text-align:center;
}

#category_list ul{
    padding: 0;
    text-align: left;
    margin: 0 auto;
    width: 100%;
    list-style: none;
    overflow: hidden;
}

#category_list li{
    float: left;
    width: 23%;
    padding: 1em 0;
    margin: 0 1% 1em;
    border-bottom: 1px solid #aaaaaa;
}
@media screen and (max-width: 48em) {
    #category_list li{width:33%;}
}
@media screen and (max-width: 36em) {
    #category_list li{width:48%;}
}
于 2012-12-08T03:32:28.653 回答