将单词 Left Right 和 Center 对齐在同一行

Question

我正在尝试制作此导航，但我不知道如何使所有单词都适合居中、左侧和右侧

<nav class="barBox" target="_blank">
<a href="#" class="bar"><font color="lime"><b>Home</b></font></a> 
<a href="#" class="bar"><font color="lime"><b>Forums</b></font></a> 
<a href="#" class="bar"><font color="lime"><b>Store</b></font></a>
</nav>

这是我的代码，我试图将所有内容放在一条线上，而家在左侧，论坛在中心，商店在右侧。 都在同一条线上。

Answer 1

你可以使用定位。 这只是一种可能的解决方案。

 .barBox { width: 100%; position: relative; text-align: center; } .barBox a { color: #fff; background: #aaa; padding: 5px 10px; display: inline-block; font-weight: bold; text-decoration: none; } .barBox a:first-child { position: absolute; left:0; } .barBox a:last-child { position: absolute; right:0; }

 <nav class="barBox" target="_blank"> <a href="#" class="bar">Home</a> <a href="#" class="bar">Forums</a> <a href="#" class="bar">Store</a> </nav>

请注意，我删除了font和b标签……它们已被弃用多年。

Answer 2

这对你有帮助吗？

用过的：

float: left //left
margin: 0 auto; //center
right: 10px //push it to the right but can still see it

有点笨拙，但可以完成工作

https://jsfiddle.net/t20jjjz7/1/