html - 如何格式化按钮位置？

Question

我正在学习制作 chrome 扩展，我添加了按钮并使用 CSS 设置了样式。如何制作三列两行按钮？

我试过更改样式并使用 CSS 中的“位置”，但我在互联网上找不到任何东西。

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<a href="https://google.co.uk" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a> 

我正在尝试获取这些按钮的行和列，而不仅仅是所有这些按钮的一行。

Answer 1

一个完美的布局是使用 CSS Grid Layout .并设置样式，使用 CSS Flex Layout .

我们之所以选择CSS Grid，是因为有一个整洁的grid-template-columns它跟踪列的大小，这里我们告诉它列数 (3) 和轨道大小。网格布局的绝佳指南 https://css-tricks.com/snippets/css/complete-guide-grid/

我们之所以选择 CSS Flex 来做样式，是想让按钮居中。因为我们之前放置了行高的最小值-最大值。但是您不必使用 Flex Layout，您可以使用 Grid Layout 并添加 place-self: center; 代替。但这意味着您必须自己控制尺寸。

基本上您只需执行以下操作:

• 仅网格布局:https://codepen.io/mohamedhmansour/pen/XooJEx
• 网格和 flex 布局:https://codepen.io/mohamedhmansour/pen/gZZbGP

运行下面的代码片段:

body {
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}

.button {
  border: 1px solid transparent;
  border-radius: 3px;
  border-color: #0095ff;
  box-shadow: 0 0 0 0 rgba(0,149,255,0);
  color: #07C;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(0,119,204,0.05);
  color: #005999;
}

<div class="grid">
<a href="#" class="button">Button1</a>
<a href="#" class="button">Button2</a>
<a href="#" class="button">Button3</a>
<a href="#" class="button">Button4</a>
<a href="#" class="button">Button5</a>
<a href="#" class="button">Button6</a> 
</div>