时间戳

首页 > 解决方案 > 创建具有左右对齐项目的导航栏

html - 创建具有左右对齐项目的导航栏

问题描述

我想创建一个导航栏，左侧有一些链接，右侧有一个按钮

#navbar {
  padding: 20px;
  border: 1px solid #000000;
}

#btn {
  padding: 6px 16px;
  float: right;
}
<div id="navbar">
  <a>link 1</a>
  <a>link 2</a>
  <button id="btn">button 1</button>
</div>

如您所见，按钮未垂直居中。我尝试使用此代码修复它

#navbar {
  overflow: hidden;
  padding: 20px;
  border: 1px solid #000000;
}

.navbarElement {
  padding: 6px 16px;
}

#navbar a {
  float: left;
}

#buttonBar {
  float: right;
}
<div id="navbar">
  <a class="navbarElement">link 1</a>
  <a class="navbarElement">link 2</a>
  <div id="buttonBar">
    <button class="navbarElement">button 1</button>
  </div>
</div>

我认为这个解决方案很糟糕，因为我也必须为链接设置填充。我也认为可能有更聪明的解决方案而不是使用float？

如果可能的话，我不想添加许多 DOM 元素来实现所需的行为。

标签： htmlcss

解决方案

它可以提供帮助。

#navbar {
  overflow: hidden;
  padding: 20px;
  border: 1px solid #000000;
  display:flex;
}

.links {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex:1;
}

.links a {
  padding:0 10px;
}

#buttonBar {
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
<div id="navbar">
  <div class="links">
    <a class="navbarElement">link 1</a>
    <a class="navbarElement">link 2</a>
  </div>
  <div id="buttonBar">
    <button class="navbarElement">button 1</button>
  </div>
</div>

推荐阅读