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

わかりましたので、私が求めている効果を達成するための最良の方法は、ul幅を正しく機能させようとするのではなく、パーセンテージとメディアクエリでli幅を変更することです.

だから、このようなもの：

#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 に答える