我有一個(gè)燒瓶形狀:

<form action="/data1" method="GET">
    <button type="submit">Feed1</button>
</form>

<form action="/data2" method="GET">
    <button type="submit">Feed2</button>
</form>

按鈕顯示如下:

期望在同一行中添加按鈕。

我試過下面的風(fēng)格，但是沒用:

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

不確定是否是因?yàn)楸韱螛?biāo)簽，它沒有對(duì)齊。我也試過包裝類，但是沒有反應(yīng)。

你能做到的。將按鈕的display屬性設(shè)置為inline-flex，并將類行設(shè)置為顯示flex。下面是您需要做的工作片段。

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  font-size: 16px;
  margin-right: 10px;
}

.row{
  justify-content: center;
  display: flex;
  margin-right: 10px;
}

<div class="row">
<form action="/data1" method="GET">
    <button type="submit">Feed1</button>
</form>

<form action="/data2" method="GET">
    <button type="submit">Feed2</button>
</form>


</div>

您可以使用CSS flexbox對(duì)齊一行中的按鈕。只需添加一個(gè)帶有display: flex屬性的父容器，并設(shè)置justify-content: center，使按鈕水平居中。

示例: HTML:

<div class="button-row">
  <form action="/data1" method="GET">
    <button type="submit">Feed1</button>
  </form>
  <form action="/data2" method="GET">
    <button type="submit">Feed2</button>
  </form>
</div>

CSS:

.button-row {
display: flex; /* set the display property to flex */
justify-content: center; /* horizontally center the buttons */
}

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 0 10px; /* add 10px margin to the buttons */
}

希望有幫助:)