我有一个包含多个样式为按钮的 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 标记。这必须是动态的,因为可以有更多或更少的按钮......
我想要实现的是:
最佳答案
除了 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 示例,以便我们了解您已经尝试过的内容以及代码可能出错的地方。
关于html - 使用 CSS 将容器中的按钮定位为网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20849221/