如何在同一行上對齊兩個元素？

Question

我希望我的“ Acme Web設計”標題和導航都在同一行上嗎？

我試圖更改導航的底邊距，以使其定位在與標題相同的行上，但這似乎不起作用。

我的HTML和CSS文件的代碼段：

 header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } nav { float: right; margin-bottom: 30px; } nav a { color: white; text-decoration: none; padding: 10px; } 

 <header> <div class="container"> <div id="top header"> <h1>Acme Web Design</h1> </div> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </header> 

這是我的HTML和CSS文件的外觀：

這就是我想要的樣子：

Answer 1

您聽說過flexbox嗎？ 對於此類對齊問題，這是一個不錯的選擇。

 .container { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding: 0 30px; min-height: 70px; /* add 'display: flex' (and any additional flex properties) to the containing element */ display: flex; flex-direction: row; align-items: center; flex-wrap: no-wrap; justify-content: space-between; } nav a { color: white; text-decoration: none; padding: 0 10px; } 

 <header> <div class="container"> <div id="top header"> <h1>Acme Web Design</h1> </div> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </header> 

這是一個有趣的教程，可了解更多信息： https : //flexboxfroggy.com/

Answer 2

最簡單的方法是在容器DIV上使用flexbox，並進行以下設置：

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

順便說一句：您的“頂部標頭”元素上有兩個ID-一個絕對足夠。

 .container { display: flex; justify-content: space-between; align-items: flex-end; } header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } nav { margin-bottom: 30px; } nav a { color: white; text-decoration: none; padding: 10px; } 

 <header> <div class="container"> <div id="top header"> <h1>Acme Web Design</h1> </div> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </header> 

Answer 3

您需要為nav類提供margin-top而不是margin-bottom。 以下是JSbin的鏈接

  header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; padding-top: 30px; min-height: 70px; } header h1 { float:left; } nav { float:right; margin-top:5% } nav a { color: white; text-decoration: none; padding: 10px; } 

  <header> <div class="container"> <span id="top header"> <h1>Acme Web Design</h1> </span> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </header> 

Answer 4

您可以使用float來嘗試。

 header { background-color: #35424a; border-bottom: 2px solid #ff6600; color: white; min-height: 70px; line-height: 70px; } nav { width: auto; float: right; margin-bottom: 30px; } nav a { color: white; text-decoration: none; padding: 10px; } #topheader{ width: auto; float: left; } #topheader h1{ margin: 0; } 

 <header> <div class="container"> <div id="topheader"> <h1>Acme Web Design</h1> </div> <nav> <a href="index.html">HOME</a> <a href="about.html">ABOUT</a> <a href="services.html">SERVICES</a> </nav> </div> </header>