html - 右边的按钮向下一行

Question

我正在创建一个顶部有三个按钮的网站，我希望它们保持在同一行上，但第三个按钮总是下一行

<div style="display: inline;" align="center">
  <div style="float: left;">
    <p style="text-align:left"><a href="Index.html" class="button">Formål</p></a>
  </div>
  <div style="float: center;">
    <p style="text-align:center"><a href="Ideer.html" class="button">Ideer</p></a>
  </div>
  <div style="float: right;">
    <p style="text-align:right;"><a href="Kontakt Os.html" class="button">Kontakt Os</p></a>
  </div>

Result

Answer 1

在我向您展示如何实现所需的输出之前，让我先说明两件事。

1. 不要使用内联 CSS
2. 你使用floats使事情复杂化了

使用flexbox，您可以轻松实现所需的布局

.btn-container {
  display: flex;
  justify-content: space-between;
  background: green;
  padding: 10px;
}

button {
  width: 100px;
  padding: 8px;
}

<div class="btn-container">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>