Question

以下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>

Answer 1

尝试this（jsFiddle）编辑:(最接近的版本：here）：

#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移动 - >李。

Answer 2

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

#category_list ul {
  width: 80%;
  margin: 0 auto;
}

Answer 3

好的，事实证明，实现我所效果的最佳方法是使用百分比和媒体查询修改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%;}
}

左对齐<ul>在Wrapper <div> </div> </ul>中居中

3 个答案: