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

Question

I would like for my 'Acme Web Design' header and navigation all to be on the same line?

I have tried to change the bottom margin for the navigation to make it position on the same line as my header but that doesn't seem to work.

Snippet of my HTML and CSS file:

 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> 

Here is how it looks like with my HTML and CSS file:

This is how I want it to look like:

Answer 1

Have you heard of flexbox? It's a great option for alignment issues like this.

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

Here's a fun tutorial to learn more: https://flexboxfroggy.com/

Answer 2

The easiest way is to use flexbox on the container DIV, with the following settings:

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

BTW: You have two IDs on your 'top header' element - one is definitely enough....

 .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

You need to provide margin-top instead of margin-bottom for nav class. Following is the link to 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

You can try it by using 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>