Question

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

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

with ReportEntry() as report:

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

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

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>

如何格式化按钮的位置？

1 个答案: