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

Question

我有一个包含多个样式为按钮的 anchor 标记的容器(它可以有更多或更少的按钮):

<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 但没有成功。

我知道我需要为容器固定一个宽度，但我无法固定容器内的所有 anchor 标记。这必须是动态的，因为可以有更多或更少的按钮......

我想要实现的是:

Answer 1

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

.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

下次尝试包含一个 fiddle 示例，以便我们了解您已经尝试过的内容以及代码可能出错的地方。