html - 如何获得三个按钮(1x 左和 2x 右)然后在下面更多？

Question

(哇，我讨厌标题)

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

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

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

<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>