如何在同一行上对齐两个元素？

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>