html - 按钮水平对齐
问题描述
查看代码
body,
html {
margin: 0;
height: 100%;
}
.background {
height: 100%;
background-image: url(../images/home-background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.button {
border: none;
padding: 15px 25px;
text-align: center;
font-weight: bold;
font-size: 16px;
cursor: pointer;
float: right;
width: 28vw;
border-radius: 50px;
position: relative;
margin-right: 7vw;
}
.button:hover {
background-color: green;
}
.login {
background-color: #DF6248;
color: white;
margin-top: 12vw;
}
.register {
background-color: #DF6248;
color: white;
margin-top: 12vw;
}
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body class=background>
<button class="button login">LOGIN</button>
<button class="button register">REGISTER</button>
</body>
</html>
这样做是水平对齐按钮。但我希望注册按钮位于登录按钮下方。有什么我想念的吗?
我也尝试了br,但效果不佳。我怎样才能让它工作?
解决方案
只需将浮动从您的按钮移动到容器 div
<!doctype html>
<html lang="en">
<html>
<style>
body,
html {
margin: 0;
height: 100%;
}
div{
text-align:right;
}
.button {
border: none;
padding: 15px 25px;
text-align: center;
font-weight: bold;
font-size: 16px;
cursor: pointer;
width: 28vw;
border-radius: 50px;
position: relative;
margin-right: 7vw;
}
.button:hover {
background-color: green;
}
</style>
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body class=background>
<div>
<button class="button login">LOGIN</button>
</div>
<div>
<button class="button register">REGISTER</button>
</div>
</body>
</html>
推荐阅读
- php - PHP FOPEN 函数中的数据未保存到 CSV。改为保存页面 HTML
- html - 我正在解析 html,我不想包含 header 元素的 header img 标签
- http-referer - Javascript 检测访问者来源/推荐人
- vb.net - 加密数据库详细信息时,exe文件在其他PC上不起作用VB2013
- xamarin - Twilio.Initialize 在 xamrin android 中不起作用
- apache-kafka - 我可以在 KSQL 中从表转换为流吗?
- angular - 角度文件上传验证
- laravel - 如何在 vuejs2 中执行“用户停止输入后提交表单”
- reactjs - 防止第一次获取没有参数的api?
- java - 使用 ArrayList 的冒泡排序有什么问题?