css - 使用内联 block 显示的无序列表的意外放置

Question

我有一个可以单独显示的图片网格，但我无法将此网格放在边栏旁边。

为了构建网格，我将图片放在 <ul> 中, 并为 <li> 设置属性display: inline-block .

当尝试将此网格合并到侧边栏 div 旁边时，它并未放置在侧边栏的一侧；相反，它位于侧边栏下方。放置文本可以满足我的要求。现在，当我省略 display 时和 float在 <li> 上，图片显示在正确的位置(边栏旁边)，但我希望图片显示在网格中，而不是单列中。

JSFIDDLE LIVE DEMO

这是我的 CSS

ul.cats li {
    width: 200px;
    display: inline-block;
    /* will not display to the right of sidebar */

    /* float: left; */
    /* no good either */

    text-align: center;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    border: 1px solid black;
}
.site_body_container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}
.site_sidebar {
    position: relative;
    float: left;
    height: 95%;
    color: white;
}
.site_content {
    position: relative;
    float: left;
    padding: 10px;
    border: 5px solid blue;
    height: 100%;
}

和 HTML

<div class="site_body_container">
    <div class="site_sidebar">
        <ul>
            <li>Sidebar 1</li>
             ... etc ...
        </ul>
    </div>
    <div class="site_content">cats
        <div class="container">
            <div id="links">
                <ul class="cats">
                    <li> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>

                    </li>
                    <li> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>
                      ... etc ...
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

您需要显式设置图片容器的宽度，例如:

.site_content {
    position: relative;
    float: left;
    padding: 10px;
    border: 5px solid blue;
    height: 100%;
    width: 450px;

否则，它将占据整个宽度，导致它中断到下一行，位于左侧边栏下方。

这是一个 fiddle :http://jsfiddle.net/9Wg3T/8/