创建带有左右对齐项的导航栏

Question

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

#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元素来实现所需的行为。

Answer 1

有帮助。

#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>

Answer 2

只需在按钮中添加一个负[ {'name': c.name, 'value': c.value, 'domain': c.domain, 'path': c.path} for c in session.cookies ] ：

margin-top

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

#btn {
  padding: 6px 16px;
  float: right;
  margin-top: -6px;
}