对齐导航栏上的链接

时间:2018-06-14 11:34:53

标签: html css

导航栏上有三个链接:上一个,主页和下一个。如果.navbar float: left已完成,则所有三个都会向左对齐。如果.navbar float: right已完成,则所有三个都会向右对齐。问题是调整左上角主页位于中心下一步右侧。如何用css完成?

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  font-size: 17px;
}
<div class="navbar">
  <a href="#" class="back">Previous</a>
  <a href="#" class="home">Home</a>
  <a href="#" class="next">Next</a>
</div>

3 个答案:

答案 0 :(得分:2)

为父级设置text-align:center,然后仅浮动第一个最后元素。即使有更多的锚点而不是中心的 Home ,这也有效。

.navbar {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
      text-align:center
    }

    .navbar a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 1%;
      text-decoration: none;
      font-size: 17px;
 
    }
    
    .navbar a:first-of-type{float:left;}
    .navbar a:last-of-type{float:right;}
<div class="navbar">
      <a href="#" class="back">Previous</a>
      <a href="#" class="home">Home</a>
      <a href="#" class="next">Next</a>
</div>

请注意,锚点应为inline-block而不是块。

答案 1 :(得分:2)

使用Flexbox

非常容易

body {
  margin: 0;
}

.navbar {
  display: flex;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  flex: 1;
  color: white;
}

.home {text-align: center}
.next {text-align: right}
<div class="navbar">
  <a href="#" class="back">Previous</a>
  <a href="#" class="home">Home</a>
  <a href="#" class="next">Next Next Next Next Next Next Next Next Next Next Next</a>
</div>

答案 2 :(得分:0)

.navbar a {
  width:31%;
  display: inline-block;
}

工作链接:https://codepen.io/sidhanshu28/pen/yEobga