使用CSS将容器中的按钮定位为网格

Question

我有一个容器，其中多个锚标签被设置为按钮（它可以有更多或更少的按钮）：

<div class="menu-container">
    <div class="button-container">
       <a href="#/Action1" class="button">Action1</a>
       <a href="#/Action2" class="button">Action2</a>
       <a href="#/Action3" class="button">Action3</a>
       <a href="#/Action4" class="button">Action4</a>
       <a href="#/Action5" class="button">Action5</a>
    </div>
</div>

如何使用CSS设置这个按钮，以便将这些按钮列为最多4列的网格？我尝试使用display:inline-block和float:left，但没有成功。

我知道我需要修复容器的宽度，但我不能在容器内部安装所有锚标签。这必须是恐龙，因为它可能有更多或更少的按钮......

我想要达到的目标是：

Answer 1

除了width或height之外，您还需要为float和inline添加链接。此外，您需要为父元素定义宽度，以便您可以定义它们可以“浮动”的位置。

.button-container {
    width: 520px;
    background: gray;
    overflow-y: auto;
}

.button-container > a {
    width: 100px;
    height: 100px;
    float: left;
    background: lightgray;   
    margin: 15px;
}

这是implementation with jsfiddle

下次尝试使用小提琴包含一个示例，这样我们就可以了解您已尝试过的内容以及代码可能出错的位置。

Answer 2

不确定这是否是您要找的。 http://jsfiddle.net/H9Ypc/ 我添加了一个带有css属性的div

.action-container{ display:inline-block; margin-bottom: 5px; }

绝对建议使用inline-block over float。