使用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但没有成功.

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

我想要实现的是:

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;
}

这是jsfiddle的实现

下次尝试用小提琴包含一个例子,这样我们就可以理解你已经尝试过的内容以及代码可能出错的地方.