Css 使用内联块显示的无序列表的意外放置

我有一个单独显示的图片网格，但是我不能把这个网格放在边栏旁边

为了构建网格，我将图片放置在

中，并设置

显示：内联块的属性

当尝试将此网格合并到边栏div旁边时，它不会放置在边栏的一侧；相反，它位于侧边栏下。放置文本符合我的要求。现在，当我省略
上的
显示
和
浮动
时，图片显示在正确的位置（侧边栏旁边），但我希望图片显示在网格中，而不是一列中


这是我的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>



边栏1
... 等

猫




... 等


您需要明确设置容纳图片的容器的宽度，例如：

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

}

否则，它将占据整个宽度，从而导致它断开到左侧边栏下方的下一行

这里有一个小问题：
经过一段时间的搜索，我找到了另一个解决方案，这就是我目前正在使用的解决方案

我可以使边栏的宽度可变（由其内容的大小决定），“猫”图库占据边栏右侧的剩余宽度：

.site_sidebar {
    position: relative;
    float: left;
    height: 95%;
    background-color: #eeffff;
    padding: 0;
}

.site_content {
    position: relative;
    padding: 0;
    overflow: hidden;
}

诀窍是将
.site\u content
的溢出设置为
隐藏
。
中的解释您在
ul.cats li
中的宽度将被丢弃。如果你让它自动的话，它会工作的很好。这是你想要的吗？之所以不能在一行中获取元素，是因为您要求猫的有序列表的宽度为整行（100%），而您没有考虑已经存在的侧边栏的宽度。@Bud是的，您的小提琴正是我想要的。这与大卫在回答中得出的结论相同。哇，我的页面没有重新加载。我的错就在那。