css 如何将按钮一个放在另一个下面，而不是在网格中有一行按钮？

fdx2calv 于 12个月前发布在其他

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

我试图把两个或两个以上的按钮在一列中，我尝试了内联，内联块，块，但没有工作。我需要一个按钮在顶部和下面的其他人，而不是在一行，而不是在第一行。

<!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .grid-container {
      display: grid;
      grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container>div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    
    .item2 {
      display: block;
    }
  </style>
</head>

<body>

  <h1>Grid Layout</h1>

  <div class="grid-container">
    <div class="item1">Title</div>
    <div class="item2">
      <button>Hello</button>
      <button>Bye-Bye</button>
    </div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>

</body>

</html>

字符串
我尝试如何做到这一点，我失败了。也许你可以帮助我这一点。Stackexchange告诉我，我的大部分问题是代码，我不知道如何修复它。

css

来源：https://stackoverflow.com/questions/77721741/how-can-to-put-buttons-one-below-another-one-instead-of-having-a-row-of-buttons

2条答案

按热度按时间

sbtkgmzw1#

根据上面提供的代码，要获得垂直放置按钮所需的结果，CSS规则“display：block”应该应用于它们，如下所示：

.item2 button {
  display: block;
}

字符串

赞(0）回复(0）举报 12个月前

9nvpjoqh2#

您可以使用CSS将两个或多个按钮放在一列中以使用flex属性。flex属性是flex-grow、flex-shrink和flex-basis的简写，它们控制项目如何在flex容器中增长、收缩和占用空间。通过将flex属性设置为10auto，您可以让按钮占用列中的可用空间，并在需要时换行到下一行。
要使用flex属性，您需要通过将父元素的display属性设置为flex来使其成为flex容器。您还需要将其flex-direction属性设置为column以使项目垂直堆叠。您还可以使用align-items属性来水平center项目。

<!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .grid-container {
      display: grid;
      grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container>div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    
    .item2 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .item2 button {
      flex: 1 0 auto;
      margin: 5px;
    }
  </style>
</head>

<body>

  <h1>Grid Layout</h1>

  <div class="grid-container">
    <div class="item1">Title</div>
    <div class="item2">
      <button>Hello</button>
      <button>Bye-Bye</button>
    </div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>

</body>

</html>

字符串
PS：：
flex: 5 5 auto属性表示：

flex-grow的值是5，这意味着当flex容器中有额外的空间时，flex项的增长速度将比其他具有较低flex-grow值的flex项快五倍。
flex-shrink值为5，这意味着当flex容器中没有足够的空间时，flex项的收缩速度将比其他flex-shrink值较低的flex项快五倍。
flex-basis的值为auto，这意味着Flex项将使用其宽度（在水平书写模式下）或高度（在垂直书写模式下）作为首选大小，除非它具有内容值。

下面是一个示例代码片段，说明了flex: 5 5 auto的效果：

<!DOCTYPE html>
    <html>

    <head>
      <style>
/* The flex container has a fixed width and height */
.container {
display: flex;
width: 400px;
height: 200px;
border: 1px solid black;
}

/* The first flex item has flex: 5 5 auto */
.item1 {
flex: 5 5 auto;
background-color: lightblue;
}

/* The second flex item has flex: 1 1 auto */
.item2 {
flex: 1 1 auto;
background-color: lightgreen;
}
</style></head>
<body>
<div class="container">
<div class="item1">This is the first flex item </div>
<div class="item2">This is the second flex item</div>
</div>
</body>
</html>

型
正如你所看到的，第一个flex项比第二个flex项占用更多的空间，因为它有一个更高的flex-grow值。如果你调整浏览器窗口的大小，你也会注意到第一个flex项比第二个flex项收缩得更多，因为它有一个更高的flex-shrink值。

赞(0）回复(0）举报 12个月前

我来回答

css 如何将按钮一个放在另一个下面，而不是在网格中有一行按钮？

2条答案

相关问题

热门标签

最新问答