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

许多问候月亮

标签： htmlcssbuttonpositioning

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>