html - 如何让按钮并排在同一行？

Question

我从 API 获取数据并使用 HTML 显示它。

#dat {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

button {
  margin-left: 20px;
  display: inline;
}

<h1><u>Weather App</u></h1>
<div id="dat">
  <p id="data"></p>
  <p id="temp"></p>
  <p id="time"></p>

  <button onclick="convertc()">imperial</button>
  <button onclick="convertf()">metric</button>
</div>

问题是两个按钮都在另一个上面。我想把它放在同一条线上。谢谢。

Answer 1

您没有为两个按钮留出足够的宽度。

我把宽度改成了200px；

#dat{
  position:absolute;
    width:200px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
}
button{
 margin-left:20px;
  display:inline;
}

<h1><u>Weather App</u></h1>
  <div id="dat">
    <p id="data">
    </p>
    <p id="temp">
    </p>
    <p id="time">
    </p>

  <button onclick="convertc()">imperial</button>
  <button onclick="convertf()">metric</button>
</div>