我有一個燒瓶形狀:

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

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

按鈕顯示如下:

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

我試過下面的風格，但是沒用:

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

不確定是否是因為表單標簽，它沒有對齊。我也試過包裝類，但是沒有反應。

你能做到的。將按鈕的display屬性設置為inline-flex，并將類行設置為顯示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對齊一行中的按鈕。只需添加一個帶有display: flex屬性的父容器，并設置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 */
}

希望有幫助:)