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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

例如

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为你设定了固定高度;）

＆＃13;

＆＃13;

header.headerBox {
    	width: 100%;
    	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 {
      display:flex;
      flex-flow: row wrap;
      align-items: center;
    	color: #000099;
    	border-top: 2px solid #000099;
    	margin: 0px;
    	padding-left: 5px;
    	padding-right: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    nav.xNavigation a {
    	color: #000099;
    	text-decoration: none;
    	cursor: pointer;
    	font-weight: bold;
    }
    nav.xNavigation select {
    	display:flex;
        flex-flow: row wrap;
        justify-content: flex-end;
    }
    nav.xNavigation a:hover {
    	color: white;
    }
    .select-container {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        padding-top: -20px;
        margin-top: -20px;
     }

＆＃13;

    <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> |
        <div class='select-container'>
          <select name="menu" id="menu">
          <option value="mainBox" selected="selected">Home</option>
            <option value="settingsBox">Settings</option>
        </select>
        </div>
      </nav>
    </header>

＆＃13;

＆＃13;

＆＃13;