如何对齐菜单图标和标题文本

时间：2017-02-07 18:46:25

标签： html css

在我的网站上，有一个菜单汉堡图标和标题。我一直试图将它们对齐，以便它们在同一行，但我无法弄清楚如何。我试过在div中包装，我也试过display:inline-block。有没有人知道如何对齐文本和汉堡图标。

@import url(http://fonts.googleapis.com/css?family=Raleway:500);
 *,
*:before,
*:after {
  box-sizing: border-box;
}
.menu-wrapper {
  position: relative;
  width: 250px;
  height: 250px;
  margin-top: 60px;
  margin-left: 30px;
}
.menu {
  position: relative;
  width: 36px;
  height: 6px;
  background-color: #707070;
  user-select: none;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin: 5px;
  color: #707070;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
.menu label {
  cursor: pointer;
  position: absolute;
  font-family: 'Raleway', sans-serif;
  font-size: 40px;
  line-height: 30px;
  top: -12px;
  left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
  transition: all 0.25s ease-in-out;
  opacity: 1;
  width: 180px;
  transform: translateX(15px);
  pointer-events: auto;
}
.menu:after,
.menu:before {
  content: "";
  position: absolute;
  width: 36px;
  height: 6px;
  background-color: #707070;
  transition: all 0.25s ease-in-out;
}
.menu:after {
  top: 12px;
}
.menu:before {
  top: -12px;
}
.menu:hover,
.menu.open {
  background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
  transition: all 0.3s ease-in-out;
  width: 18px;
}
.menu:hover::after,
.menu.open::after {
  transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
  transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
  margin: 0;
  padding: 36px 0 0 0;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.25s ease-in-out;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.menu ul.nav-links li {
  width: 100%;
  padding: 4px 8px;
  list-style-type: none;
  font-family: 'Raleway', sans-serif;
  font-size: 25px;
  text-transform: uppercase;
  transition: all 0.25s ease-in-out;
  border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
  color: #707070;
  border-left: 2px solid #707070;
}
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 header {
  background: #fff;
  height: 145px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  border-bottom: 5px solid;
  border-bottom-color: #bcbcbc;
}
.nav-up {
  top: -145px;
}
body,
html {
  margin: 0;
  padding: 0;
}
video.home {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.vid {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
footer {
  background: #222020;
  height: 50px;
  position: fixed;
  bottom: 0;
  margin-bottom: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 99%;
}
p.copyright {
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}
div.footer {
  float: left;
  margin-left: 2em;
}
h1 {
  text-align: center;
  font-family: 'Fjalla One', sans-serif;
  color: #666;
}
p {
  color: black;
  font-family: 'Oswald', sans-serif;
}
a.contact {
  text-decoration: none;
  color: white;
  background-color: #36a2dc;
  padding: 20px;
  padding-left: 10px;
  border-radius: 5%;
  cursor: pointer;
  outline: none;
  height: 100px;
  width: 200px;
  font-family: 'Quicksand', sans-serif;
}
i.icon {
  padding: 8px;
}
div.contact {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul.social {
  display: block;
  margin: 5% 0;
  list-style-type: none;
  text-align: center;
  margin-top: 0px;
}
ul.social li {
  font-size: 1em;
  display: inline;
  padding: 0 2%;
}
ul.social li a {
  color: #707070;
}
ul.social li.dribble a:hover {
  color: #e040a9;
}
ul.social li.twitter a:hover {
  color: #258fc9;
}
ul.social li.behance a:hover {
  color: #212121;
}
ul.social li.googleplus a:hover {
  color: #e73710;
}
ul.social li.github a:hover {
  color: #171515;
}
/*=================HEADER=====================================*/

a {
  text-decoration: none;
  color: #707070;
}
a:hover {
  color: #898e8e;
}
a:active {
  color: white;
}
div.head {
  margin-top: 10px;
}
/*=========================================================== */

.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */

section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
  color: #515151;
  text-align: center;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
  color: #515151;
  text-align: center;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
  background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
  background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}
<header class="nav-down">

  <!-- Open on hover menú -->
  <div class="menu-wrapper">
    <div class="menu">

      <ul class="nav-links">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li class="active"><a href="#">Projects</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="">
    <h1>William Chen</h1>
    <ul class="social">
      <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a>
      </li>
      <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
      </li>
      <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a>
      </li>
      <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a>
      </li>
      <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a>
      </li>
    </ul>
  </div>
</header>

3 个答案:

答案 0 :(得分：1)

这是一个有一些变化的JsFiddle：https://jsfiddle.net/m5b2f0gc/1/

我做的一件事是更改了.menu边距，然后我创建了一个名为“william”的新ID来帮助移动边距。

.menu {
  position: relative;
  width: 36px;
  height: 6px;
  background-color: #707070;
  user-select: none;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin: 20px;
  color: #707070;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-tap-highlight-color: transparent;

} 

#william {  
margin-left: 150px; 
}

答案 1 :(得分：0)

这里有很多评论......但他们都没有提出看似简单的选择。

将div中的两个元素包裹起来（或者不是，只要菜单包装和头部的宽度都<= 100％组合，它就可以在没有父div的情况下工作）。

添加以下.menu-wrapper和.head类：

.menu-wrapper, .head { 
   float:left;
}

这将使他们在同一行。然后你可以使用填充/线高，使它们更美妙地对齐。

答案 2 :(得分：0)

我认为这段代码符合您的要求：

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Raleway:500);
 *,
*:before,
*:after {
  box-sizing: border-box;
}
.menu-wrapper {
  position: relative;
  width: 250px;
  height: 250px;
  margin-top: 60px;
  margin-left: 30px;
  text-align: justify;
}
.menu {
  position: relative;
  width: 36px;
  height: 6px;
  background-color: #707070;
  user-select: none;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin: 5px;
  color: #707070;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
.menu label {
  cursor: pointer;
  position: absolute;
  font-family: 'Raleway', sans-serif;
  font-size: 40px;
  line-height: 30px;
  top: -12px;
  left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
  transition: all 0.25s ease-in-out;
  opacity: 1;
  width: 180px;
  transform: translateX(15px);
  pointer-events: auto;
}
.menu:after,
.menu:before {
  content: "";
  position: absolute;
  width: 36px;
  height: 6px;
  background-color: #707070;
  transition: all 0.25s ease-in-out;
}
.menu:after {
  top: 12px;
}
.menu:before {
  top: -12px;
}
.menu:hover,
.menu.open {
  background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
  transition: all 0.3s ease-in-out;
  width: 18px;
}
.menu:hover::after,
.menu.open::after {
  transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
  transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
  margin: 0;
  padding: 36px 0 0 0;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.25s ease-in-out;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.menu ul.nav-links li {
  width: 100%;
  padding: 4px 8px;
  list-style-type: none;
  font-family: 'Raleway', sans-serif;
  font-size: 25px;
  text-transform: uppercase;
  transition: all 0.25s ease-in-out;
  border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
  color: #707070;
  border-left: 2px solid #707070;
}
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 header {
  background: #fff;
  height: 145px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  border-bottom: 5px solid;
  border-bottom-color: #bcbcbc;
}
.nav-up {
  top: -145px;
}
body,
html {
  margin: 0;
  padding: 0;
}
video.home {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.vid {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
footer {
  background: #222020;
  height: 50px;
  position: fixed;
  bottom: 0;
  margin-bottom: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 99%;
}
p.copyright {
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}
div.footer {
  float: left;
  margin-left: 2em;
}
h1 {
  text-align: center;
  font-family: 'Fjalla One', sans-serif;
  color: #666;
  margin-bottom: -80px;
}
p {
  color: black;
  font-family: 'Oswald', sans-serif;
}
a.contact {
  text-decoration: none;
  color: white;
  background-color: #36a2dc;
  padding: 20px;
  padding-left: 10px;
  border-radius: 5%;
  cursor: pointer;
  outline: none;
  height: 100px;
  width: 200px;
  font-family: 'Quicksand', sans-serif;
}
i.icon {
  padding: 8px;
}
div.contact {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul.social {
  display: block;
  margin: 5% 0;
  list-style-type: none;
  text-align: center;
  margin-top: 0px;
}
ul.social li {
  font-size: 1em;
  display: inline;
  padding: 0 2%;
}
ul.social li a {
  color: #707070;
}
ul.social li.dribble a:hover {
  color: #e040a9;
}
ul.social li.twitter a:hover {
  color: #258fc9;
}
ul.social li.behance a:hover {
  color: #212121;
}
ul.social li.googleplus a:hover {
  color: #e73710;
}
ul.social li.github a:hover {
  color: #171515;
}
/*=================HEADER=====================================*/

a {
  text-decoration: none;
  color: #707070;
}
a:hover {
  color: #898e8e;
}
a:active {
  color: white;
}
div.head {
  margin-top: 10px;
}
/*=========================================================== */

.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
      SECTIONS
    ============================================================ */

section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
  color: #515151;
  text-align: center;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
  color: #515151;
  text-align: center;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
  background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
  background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}
＆＃13; 
 <h1>William Chen</h1>
<div class="menu-wrapper">
  <div class="menu">

    <ul class="nav-links">
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li class="active"><a href="#">Projects</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>
<div class="head">

  <ul class="social">
    <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a>
    </li>
    <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
    </li>
    <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a>
    </li>
    <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a>
    </li>
    <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

JSFiddle：https://jsfiddle.net/wvyxe5rp/2/

我所做的是将h1元​​素移到顶部，然后添加以下行：

margin-bottom: -80px;

在h1的CSS中。

相关问题
最新问题