html - 向左浮动汉堡菜单以与 div id 对齐

Question

我确信这是非常简单的事情，但我想将我的汉堡导航与我定义的文本对齐。它目前正坐在下面。

我曾尝试在定义的文本中包含 href 链接，但这会导致汉堡导航始终显示，而不仅仅是移动尺寸。理想情况下，这只会在较小的屏幕宽度下显示。

这是我的代码。

body {
  font: 100%/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: white;
}


/* Style the list 'container'  */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */

ul.topnav li {
  float: left;
}


/* style the links  */

ul.topnav li a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* hover */

ul.topnav li a:hover {
  color: gold;
}


/* Hide the icon initially  */

ul.topnav li.icon {
  display: none;
}


/* Global */

.container {
  width: 60%;
  margin: auto;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  margin: 0;
  padding: 0;
}

.subscribe {
  height: 38px;
  background: gold;
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
}

.dark {
  padding: 25px;
  background: #35424a;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}


/* Header **/

header {
  background: #35424a;
  color: white;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: gold 5px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight {
  color: gold;
}

header a:hover {
  color: gold;
}

h3 .bronze {
  color: #cc6633;
}

h3 .silver {
  color: silver;
}

h3 .gold {
  color: gold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  color: black;
}

#showcase h1 {
  margin-top: 50px;
  font-size: 300%;
  margin-bottom: 10px;
}

#showcase p {
  font-size: 120%;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: #ffffff;
  background: #35424a
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type="email"] {
  padding: 4px;
  height: 26px;
  width: 250px;
}


/* Sidebar */

aside#sidebar {
  float: right;
  margin-top: 10px;
}

aside#sidebar .quote input,
aside#sidebar .quote textarea {
  top-margin: 10px;
  width: 80%;
  padding: 10px;
}


/* Main-col */

article#main-col {
  float: left;
  width: 65%;
}


/* Imagery */

#social {
  margin-top: 10%;
  text-align: center;
  font-size: 150%;
  color: black;
}

#imagery {
  margin-top: 5%;
  margin-bottom: 5%;
}

#imagery .box {
  float: right;
  text-align: center;
  width: 30%;
  padding: 10px;
}

#imagery .box i {
  font-size: 700%;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}

.column img {
  margin-top: 12px;
  width: 100%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Services */

ul#services li {
  list-style: none;
  padding: 20px;
  border: #cccccc solid 1px;
  margin-bottom: 5px;
  background: #35424a;
  color: white;
}

footer {
  padding: 20px;
  margin-top: 20px;
  color: black;
  background-color: gold;
  text-align: center;
}


/* Media Queries */

@media(max-width: 768px) {
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar {
    float: none;
    text-align: center;
    width: 100%;
  }
  header {
    padding-bottom: 20px;
  }
  #imagery {
    font-size: 50%;
    float: none;
  }
  #showcase h1 {
    margin-top: 40px;
  }
  #newsletter button,
  .quote button {
    display: block;
    width: 100%;
  }
  #newsletter form input[type="email"],
  .quote input,
  .quote textarea {
    width: 100%;
    margin-bottom: 5px;
  }
  /* nav */
  ul.topnav li {
    display: none;
  }
  ul.topnav li.icon {
    display: inline-block;
  }
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    /*  'un' float the list items so they return to displaying vertically */
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


/*css reset
* {


  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background-image: url("bg.jpg");
  background-size: cover;  /*this seems better*/


/*background-size: contain;

}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end reset */

<!DOCTYPE html>
<html lang="en">

<head>
  <title>DB Plumbing | Home</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/3a2264e344.js"></script>
  <script src="html8shiv.js"></script>
  <link rel="shortcut icon" type="image/png" href="wrench.png" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="desciption" content="Darran Brady Plumbing">
  <meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
  <meta name="author" content="DB, Darran, Brady, Darran Brady">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
  </script>
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">DB</span> Plumbing</h1>
      </div>
      <nav>
        <ul class="topnav" id="myTopnav">
          <li class="active"><a href="home8.html">Home</a></li>
          <li><a href="about8.html">About</a></li>
          <li><a href="services8.html">Services</a></li>
          <li><a href="coverage8.html">Coverage</a></li>
          <li><a href="contact8.html">Contact</a></li>
          <li class="icon">
            <a href="javascript:void(0);" style="font-size:130%;" onclick="myFunction()">☰</a>
        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <h1>Local Award Winning Trader</h1>
      <h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i><a href="tel:+07756848657"> 07756848657</a></h2>
      <p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>

      <p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
    </div>
  </section>

  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Weekly Blog</h1>
      <form>
        <input type="email" placeholder="Subscribe today...">
        <button type="submit" class="subscribe">Subscribe</button>
      </form>
    </div>
  </section>

  <section id="imagery">
    <div class="container">
      <div class="box">
        <i class="fa fa-star" aria-hidden="true"></i>
        <h1>Accredited</h1>
        <p>Gas Safe Accreditted </p>
      </div>
      <div class="box">
        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
        <h1>Reputable</h1>
        <p>"25 years service experience "</p>
      </div>
      <div class="box">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        <h1>Local</h1>
        <p>Sussex and Surrey Countywide</p>
      </div>
    </div>
  </section>

  <footer>
    <div>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
    </div>
  </footer>
</body>

</html>

Wanting to float the burger nav to align with text

Answer 1

首先把你的按钮放在导航的顶部，像这样

body {
  font: 100%/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: white;
}


/* Style the list 'container'  */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */

ul.topnav li {
  float: left;
}


/* style the links  */

ul.topnav li a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* hover */

ul.topnav li a:hover {
  color: gold;
}


/* Hide the icon initially  */

ul.topnav li.icon {
  display: none;
}


/* Global */

.container {
  width: 60%;
  margin: auto;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  margin: 0;
  padding: 0;
}

.subscribe {
  height: 38px;
  background: gold;
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
}

.dark {
  padding: 25px;
  background: #35424a;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}


/* Header **/

header {
  background: #35424a;
  color: white;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: gold 5px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight {
  color: gold;
}

header a:hover {
  color: gold;
}

h3 .bronze {
  color: #cc6633;
}

h3 .silver {
  color: silver;
}

h3 .gold {
  color: gold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  color: black;
}

#showcase h1 {
  margin-top: 50px;
  font-size: 300%;
  margin-bottom: 10px;
}

#showcase p {
  font-size: 120%;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: #ffffff;
  background: #35424a
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type="email"] {
  padding: 4px;
  height: 26px;
  width: 250px;
}


/* Sidebar */

aside#sidebar {
  float: right;
  margin-top: 10px;
}

aside#sidebar .quote input,
aside#sidebar .quote textarea {
  top-margin: 10px;
  width: 80%;
  padding: 10px;
}


/* Main-col */

article#main-col {
  float: left;
  width: 65%;
}


/* Imagery */

#social {
  margin-top: 10%;
  text-align: center;
  font-size: 150%;
  color: black;
}

#imagery {
  margin-top: 5%;
  margin-bottom: 5%;
}

#imagery .box {
  float: right;
  text-align: center;
  width: 30%;
  padding: 10px;
}

#imagery .box i {
  font-size: 700%;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}

.column img {
  margin-top: 12px;
  width: 100%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Services */

ul#services li {
  list-style: none;
  padding: 20px;
  border: #cccccc solid 1px;
  margin-bottom: 5px;
  background: #35424a;
  color: white;
}

footer {
  padding: 20px;
  margin-top: 20px;
  color: black;
  background-color: gold;
  text-align: center;
}


/* Media Queries */

@media(max-width: 768px) {
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar {
    float: none;
    text-align: center;
    width: 100%;
  }
  header {
    padding-bottom: 20px;
  }
  #imagery {
    font-size: 50%;
    float: none;
  }
  #showcase h1 {
    margin-top: 40px;
  }
  #newsletter button,
  .quote button {
    display: block;
    width: 100%;
  }
  #newsletter form input[type="email"],
  .quote input,
  .quote textarea {
    width: 100%;
    margin-bottom: 5px;
  }
  /* nav */
  ul.topnav li {
    display: none;
  }
  ul.topnav li.icon {
    display: inline-block;
  }
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    /*  'un' float the list items so they return to displaying vertically */
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


/*css reset
* {


  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background-image: url("bg.jpg");
  background-size: cover;  /*this seems better*/


/*background-size: contain;

}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end reset */

<head>
  <title>DB Plumbing | Home</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/3a2264e344.js"></script>
  <script src="html8shiv.js"></script>
  <link rel="shortcut icon" type="image/png" href="wrench.png" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="desciption" content="Darran Brady Plumbing">
  <meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
  <meta name="author" content="DB, Darran, Brady, Darran Brady">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
  </script>
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">DB</span> Plumbing</h1>
      </div>
      <nav>
        <div class="icon">
          <a href="javascript:void(0);" style="font-size:130%;" onclick="myFunction()">☰</a>
        </div>
        <ul class="topnav" id="myTopnav">
          <li class="active"><a href="home8.html">Home</a></li>
          <li><a href="about8.html">About</a></li>
          <li><a href="services8.html">Services</a></li>
          <li><a href="coverage8.html">Coverage</a></li>
          <li><a href="contact8.html">Contact</a></li>

        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <h1>Local Award Winning Trader</h1>
      <h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i><a href="tel:+07756848657"> 07756848657</a></h2>
      <p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>

      <p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
    </div>
  </section>

  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Weekly Blog</h1>
      <form>
        <input type="email" placeholder="Subscribe today...">
        <button type="submit" class="subscribe">Subscribe</button>
      </form>
    </div>
  </section>

  <section id="imagery">
    <div class="container">
      <div class="box">
        <i class="fa fa-star" aria-hidden="true"></i>
        <h1>Accredited</h1>
        <p>Gas Safe Accreditted </p>
      </div>
      <div class="box">
        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
        <h1>Reputable</h1>
        <p>"25 years service experience "</p>
      </div>
      <div class="box">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        <h1>Local</h1>
        <p>Sussex and Surrey Countywide</p>
      </div>
    </div>
  </section>

  <footer>
    <div>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
    </div>
  </footer>
</body>