如何获得三个按钮（1x 左和 2x 右）然后在下面更多？

Question

（哇，我的标题很烂）

嘿，我认为这是一个相当简单的问题。我目前尝试构建一个 self-made 选项卡菜单。（我知道那里有解决方案，但我想这样做是有原因的）

我想要三个按钮开始（一个在左侧，两个在右侧并排）（示例中的链接是我代码中的按钮）。然后在这些下面我想有另一组按钮。

我现在的问题是，应该位于第一个按钮下方的按钮总是位于第一个按钮之间。

<div>
    <p style="float: left">
        <a href="http://hosting127526.a2f33.netcup.net/index.php?company/" class="button">
            <span>Back</span>
        </a>
    </p>

    <p style="float: right">
 <a href="http://hosting127526.a2f33.netcup.net/index.php?weaponry/" class="button">
            <span>Weaponry</span>
        </a>

 <a href="http://hosting127526.a2f33.netcup.net/index.php?Vehcilefleet/" class="button">
            <span>Vehicle Fleet</span>
        </a>
    </p>
</div>

<div>
    <p align="center">
        <button align="left" class="button"><span>Button 1</span></button>
 <button align="left" class="button"><span>Button 2</span></button>
 <button align="left" class="button"><span>Button 3</span></button>
 <button align="left" class="button"><span>Button 4</span></button>
        <button align="left" class="button"><span>Button 5</span></button>
 <button align="left" class="button"><span>Button 6</span></button>
    </p>
</div>

https://jsfiddle.net/Moony/Lan5swv0/

有没有办法轻松告诉第二组按钮不要进入第一组按钮之间？

我感觉这是一个很简单的问题，但是我已经很久没有用过HTML和CSS了。

许多问候月亮

Answer 1

我不确定这是你想要的吗？只需在容器后添加清除标签，它就会转到下一行

.nav:after {
  content: "";
  display: table;
  clear: both;
}

<div class="nav"> <!-- ADD class nav -->
 <p  style="float: left"> 
  <a href="http://hosting127526.a2f33.netcup.net/index.php?company/" class="button"><span>Back</span></a>
 </p>
  <p style="float: right">
   <a href="http://hosting127526.a2f33.netcup.net/index.php?weaponry/" class="button"><span>Weaponry</span></a>
   <a href="http://hosting127526.a2f33.netcup.net/index.php?Vehcilefleet/" class="button"><span>Vehicle Fleet</span></a>
 </p>
</div>


<div>
 <p align="center">
  <button align="left" class="button"><span>Button 1</span></button>
  <button align="left" class="button"><span>Button 1</span></button>
  <button align="left" class="button"><span>Button 1</span></button>
  <button align="left" class="button"><span>Button 1</span></button>
  <button align="left" class="button"><span>Button 1</span></button>
  <button align="left" class="button"><span>Button 1</span></button>
 </p>
</div>

如何获得三个按钮（1x 左和 2x 右）然后在下面更多？

How to get three buttons (1x Left and 2x Right) and then more underneath?

html

css

positioning

button