我希望我的 btn 类向右移动。我有两个按钮类，例如。 btn-full, btn-ghost, 我想把它们都向右移动，如果我把它向右浮动，它们的位置就会改变，我不知道为什么。
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<title>Musica</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Life is the Song.<br> Love is the Music.</h1>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
float: right;
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
我尝试了所有的方法，比如 float:right, the position:absolute; ;左:-5oo;但它不起作用。请帮忙
最佳答案
也许你想要这样的东西？
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:right;
}
h1{
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
</style>
<body>
<header>
<div class="hero-text-box">
<div><h1 style="display:inline-block; text-align:left;">Life is the Song.<br> Love is the Music.</h1></div>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
实验:
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
上边距:150px；//你试图用我建议的这条线手动放置按钮，如果你调整按钮的位置你可以逃脱它，但这是一个不好的做法。
相反，我只是命令 div 使其内容右对齐， 并将 H1 放在 div 中，然后将 H1 向左对齐以获得完美的左对齐文本。
关于html - 想要 Div 向右移动，，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33291338/