我想把Life's Good标志放在导航栏的左侧。如果我把它放到类中它也有动画，我不能把它放在左边。有人能帮帮我吗?下面是我的代码和一个例子，我想要的标志(用黄色标记):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn"><a href="index.html" title="">Home</a></div>
<div class="btn"><a href="#" title="">News</a></div>
<div class="btn"><a href="#" title="">Gaming</a></div>
<div class="btn"><a href="#" title="">Books</a></div>
<div class="btn"><a href="#" title="">Coding</a></div>
<div class="btn"><a href="#" title="">Contact</a></div>
</div>
</body>
</html>黄色区域是我想要的标志("Life's Good")
您在#main的margin-top中缺少px旁边的数字。您可能还需要一个margin-left值。
如果你想从特定元素中排除动画，将动画放在:not()CSS选择器中以取消选择#main。
.btn:before:not(#main)
为#main元素设置position: absolute。由于.nav-bar的位置设置为relative，因此#main将相对于其父.nav-bar处于绝对位置。
现在只需设置#main的margin以满足您的要求。我把它设置为margin: 15px 0 15px 75px(margin:右上角左下角)作为参考。
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn"><a href="index.html" title="">Home</a></div>
<div class="btn"><a href="#" title="">News</a></div>
<div class="btn"><a href="#" title="">Gaming</a></div>
<div class="btn"><a href="#" title="">Books</a></div>
<div class="btn"><a href="#" title="">Coding</a></div>
<div class="btn"><a href="#" title="">Contact</a></div>
</div>
</body>
</html>