左侧的Burger Burger菜单与div id对齐

时间：2017-11-14 18:47:26

标签： html css hamburger-menu

我确信这很简单，但我想将汉堡导航与我定义的文字对齐。它目前正坐在下面。

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

这是我的代码。

＆＃13;
＆＃13; 
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 */
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

Wanting to float the burger nav to align with text

2 个答案:

答案 0 :(得分：1)

首先将按钮放在导航的顶部，如下所示

＆＃13;
＆＃13; 
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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我只把我们感兴趣的部分放在代码上，所以它更具可读性，这是我的意思。使用display: flex属性将有助于将元素放在同一行：

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

.container {
  width: 60%;
  margin: auto;
  overflow: hidden;
  /*Below is the simple fix*/
  display: flex;
  align-items: baseline;
}

#branding {
  display: inline-block;
  background: red; /*Only for readability purpose*/
}

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

a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  text-decoration: none;
  font-size: 130%;
  background: teal; /*Only for readability purpose*/
}
<div class="container">
  <div id="branding">
    <h1><span class="highlight">DB</span> Plumbing</h1>
  </div>
  <nav>
    <ul class="topnav">
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">☰</a>
      </li>
    </ul>
  </nav>
</div>

有关更多见解，请参阅A complete guide to flexbox on CSS Tricks。

希望我做对了：）

相关问题
最新问题