html - 如何垂直对齐导航栏内的元素？

Question

我创建了导航栏，其中包含不同选项卡的链接和菜单的下拉菜单。我在垂直对齐导航栏内的所有元素时遇到问题。似乎是 select 标签导致了一些问题。这是我的大纲示例:

header.headerBox {
	width: 100%;
	height: 80px;
	border-top: 2px solid #000099;
	border-right: 2px solid #000099;
	border-left: 2px solid #000099;
  border-bottom: 2px solid #000099;
	background-color: #87CEFF;
}
h1.mainTitle {
	color: #000099;
	text-align: center;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav.xNavigation {
	height: 100%;
	color: #000099;
	border-top: 2px solid #000099;
	margin: 0px;
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}
nav.xNavigation a {
	color: #000099;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}
nav.xNavigation select {
	float: right;
}
nav.xNavigation a:hover {
	color: white;
}

<header class="headerBox">
  <h1 class="mainTitle">Single Page Application</h1>
  <nav class="xNavigation">
    <a href="#" id="tab1">Tab 1</a> |
    <a href="#" id="tab2">Tab 2</a> |
    <a href="#" id="tab3">Tab 3</a> |
    <a href="#" id="tab4">Tab 4</a> |
    <select name="menu" id="menu">
      <option value="mainBox" selected="selected">Home</option>
        <option value="settingsBox">Settings</option>
    </select>
  </nav>
</header>

正如您在上面的代码片段中看到的那样，元素没有垂直对齐。我不确定是否有组织元素的好方法。如果有人可以提供帮助，请告诉我。谢谢。

Answer 1

如果您愿意使用 flexbox，您可以进行一些调整并创建您想要的布局。

例子

header.headerBox {
  width: 100%;
  height: 80px;
  border: 2px solid #000099;
  background-color: #87CEFF;
  display: flex;
  flex-direction: column;
}
h1.mainTitle {
  color: #000099;
  text-align: center;
  margin: 0px;
  padding: 5px 0;
}
nav.xNavigation {
  color: #000099;
  border-top: 2px solid #000099;
  margin: 0px;
  padding: 2px 5px 2px 5px;
  flex: 1;
  display: flex;
  align-items: center;
}
nav.xNavigation a {
  color: #000099;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}
nav.xNavigation select {
  margin-left: auto;
}
nav.xNavigation a:hover {
  color: white;
}

<header class="headerBox">
  <h1 class="mainTitle">Single Page Application</h1>
  <nav class="xNavigation">
    <a href="#" id="tab1">Tab 1</a> |
    <a href="#" id="tab2">Tab 2</a> |
    <a href="#" id="tab3">Tab 3</a> |
    <a href="#" id="tab4">Tab 4</a> |
    <select name="menu" id="menu">
      <option value="mainBox" selected="selected">Home</option>
        <option value="settingsBox">Settings</option>
    </select>
  </nav>
</header>