2

我有一个类似画廊的带有文本内容的块项目列表。使用 display: table* stuff 将文本内容与底部对齐。该列表不是固定宽度，因为它通过创建更多列扩展到视口宽度。我想使列表在屏幕上居中，这样底行仍将与所有其他行的左侧对齐（我无法弄清楚如何使用内联块的原因之一）。例子：

<!doctype html>
<html>
    <head>
        <title>test</title>
        <style>
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            ul:after{
                display: block;
                clear: both;
                content: ' ';
            }
            li{
                display: table;
                float: left;
                border: 1px solid red;
                width: 300px;
                height: 300px;
            }
            .gridRow{
                display: table-row;
            }
            .gridCell{
                display: table-cell;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><span class="gridRow"><span class="gridCell">1</span></span></li>
            <li><span class="gridRow"><span class="gridCell">2</span></span></li>
            <li><span class="gridRow"><span class="gridCell">3</span></span></li>
            <li><span class="gridRow"><span class="gridCell">4</span></span></li>
            <li><span class="gridRow"><span class="gridCell">5</span></span></li>
            <li><span class="gridRow"><span class="gridCell">6</span></span></li>
            <li><span class="gridRow"><span class="gridCell">7</span></span></li>
            <li><span class="gridRow"><span class="gridCell">8</span></span></li>
            <li><span class="gridRow"><span class="gridCell">9</span></span></li>
            <li><span class="gridRow"><span class="gridCell">10</span></span></li>
            <li><span class="gridRow"><span class="gridCell">11</span></span></li>
            <li><span class="gridRow"><span class="gridCell">12</span></span></li>
            <li><span class="gridRow"><span class="gridCell">13</span></span></li>
            <li><span class="gridRow"><span class="gridCell">14</span></span></li>
            <li><span class="gridRow"><span class="gridCell">15</span></span></li>
            <li><span class="gridRow"><span class="gridCell">16</span></span></li>
            <li><span class="gridRow"><span class="gridCell">17</span></span></li>
            <li><span class="gridRow"><span class="gridCell">18</span></span></li>
            <li><span class="gridRow"><span class="gridCell">19</span></span></li>
        </ul>
    </body>
</html>
4

1 回答 1

1

您需要给 UL 一个宽度或将其放入具有宽度和“overflow:auto;”的包含元素中。

宽度可以以 px 或 % 为单位。

然后给容器一个边距“margin:0 auto;”

然后你只需将你的 LI 元素设置为“display:inline-block;” 或者给他们“float:left;”

示例：http: //jsfiddle.net/jDqbJ/1/

.container {
 width:75%;
 overflow:auto;
 margin:0 auto;
}

.container ul li {
 float:left;width:75px;
 height:75px;
 background:#ccc;
 margin:0 10px 20px 0;
}
于 2012-11-21T15:19:25.440 回答