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

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

＆＃13;

.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; 
}

＆＃13;

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

＆＃13;

注意我删除了font和b代码....它们已被弃用多年了。

Answer 2

这对你有帮助吗？

使用：

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

有点hacky但完成工作

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

将左右和中心的单词对齐在同一行

2 个答案: