无法将按钮与CSS Flex或网格对齐

w8biq8rn 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(129)

我试图创建一个页面，我有2个按钮列表，每一个在一个div中，并排。我尝试了CSS grid和flex，如下所示。然而，似乎没有什么工作，因为第一个div一直到左边距，另一个在它下面。
如何在第一栏的左边距和第二栏的半页之间增加一些空间？

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

button {
  width: 120px;
  height: 60px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font color: black;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #CC0000;
}

<div class="grid-container">
  <div class="grid-child">

    <a href="createCl.php"> <button style="color: #000000; text-decoration: none;">
            <strong>Aggiungi</strong></button></a>Aggiungi</span> <br><br>
  </div>

  <div class="grid-child">

    <a href="map.php"> <button style="color: #000000; text-decoration: none;">
            <strong>Mappa</strong></button></a>Mappa Clienti</span>
  </div>
</div><br>

css

来源：https://stackoverflow.com/questions/66115908/unable-to-align-buttons-with-css-flex-or-grid

2条答案

按热度按时间

k97glaaz1#

所有按钮都必须位于容器内，例如：<div class="grid-container"> .
在CSS中，grid-template-columns: ;定义了.grid-container中有多少列。
对于您在grid-template-columns: ;中键入的每一个1fr，都会创建一个新列。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  }

<div class="grid-container">
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
    <button>Button4</button>
    <button>Button5</button>
    <button>Button6</button>
</div>

我希望这对你有帮助，请让我知道。^^'

赞(0）回复(0）举报 2023-05-08

p1tboqfb2#

我是使用Flex的忠实粉丝。所以如果你不想使用网格，这里有一个解决方案：
https://codepen.io/oppo_oskar/pen/yLVJQeL

.grid-container {
    display: flex;
    flex-direction: row;
}
   
.buttons {
    display:flex;
    flex-direction: column;
}

<div class="grid-container">
    <div class="left buttons">
        <button>Left1</button>
        <button>Left2</button>
        <button>Left3</button>
        <button>Left4</button>
    </div>
    <div class="right buttons">
        <button>Right1</button>
        <button>Right2</button>
        <button>Right3</button>
        <button>Right4</button>
    </div>
</div>

要快速阅读Flex的工作原理，您可以查看这个网站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

赞(0）回复(0）举报 2023-05-08

我来回答

无法将按钮与CSS Flex或网格对齐

2条答案

相关问题

热门标签

最新问答