gpt4 book ai didi

html - 如何对齐我的菜单图标和标题文本

转载 作者:太空宇宙 更新时间:2023-11-04 09:11:21 24 4
gpt4 key购买 nike

在我的网站上,有一个菜单汉堡包图标和一个标题。我一直在尝试将它们对齐,以便它们在同一行,但我不知道如何对齐。我试过在 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>

最佳答案

这是一个有一些变化的 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;
}

关于html - 如何对齐我的菜单图标和标题文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42097573/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com