html - 如何在横幅底部放置 2 个按钮?
问题描述
如何在横幅底部放置 2 个按钮?
我可以做一个padding: 462px
,但我认为还有另一种解决方案?
实际上,我正在寻找具有清晰代码的解决方案。如果你知道一个属性来解决我的问题,我很感兴趣。
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: 462px;
}
/*******************************/
/********* General CSS *********/
/*******************************/
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
transition: .3s;
color: black;
}
/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
position: relative;
height: 45px;
}
.container {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 80%;
}
.top-bar .top-bar-left {
display: flex;
}
.top-bar .text {
display: flex;
align-items: center; /* aligne les éléments sur la même ligne */
justify-content: center;
height: 50px;
margin-right: 10px;
}
.top-bar .text i {
color: #C22312;
margin-right: 5px;
}
.top-bar .text h2{
font-size: 14px;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
margin-right: 10px;
}
.top-bar .top-bar-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .hyper-text {
display: flex;
align-items: center;
justify-content: center;
margin-right: 7px;
text-transform: uppercase;
}
.top-bar .hyper-text i {
color: black;
margin-right: 5px;
margin-left: 5px;
}
/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
position: relative;
}
.navbar .navbar-transparent {
background-color: #2a2a2a;
height:95px;
}
.navbar .navbar-brand {
padding: 20px 0;
}
.navbar .navbar-nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.navbar .navbar-nav a {
color: #fff;
text-transform: uppercase;
margin-left: 10px;
font-size: 14px;
border-radius: 3px;
padding: 7px 13px;
}
.navbar .navbar-nav a:hover {
background-color: #fff;
border-radius: 3px;
color: #2a2a2a;
}
.navbar .navbar-nav a.active {
background-color: #C22312;
transition: .5s;
color: #fff;
}
/*******************************/
/********** Money CSS ***********/
/*******************************/
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
height: 565px;
width: 100%;
background-size: cover; /* dézoomage */
}
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: auto 0;
}
#money .btn-money a {
color: #fff;
}
#money .btn-registrer {
background-color: #c22312;
padding: 8px 20px;
}
#money .btn-login {
background:rgba(0,0,0,0);
padding: 4px 20px;
border: 3px solid #fff;
}
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>title </title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
</head>
<body>
<!-- Top Bar Start -->
<div class="top-bar">
<div class="container">
<div class="top-bar-left">
<div class="text">
<i class="far fa-calendar"></i>
<h2>138 runnings days</h2>
</div>
<div class="text">
<i class="far fa-envelope"></i>
<h2>admin@superbtc.biz</h2>
</div>
</div>
<div class="top-bar-right">
<div class="hyper-text">
<select name="language" id="language-select">
<option value="english">English</option>
<option value="french">French</option>
</select>
<a href="#"><i class="fas fa-angle-right"></i>Deposit</a>
<a href="#"><i class="fas fa-angle-right"></i>Paidout</a>
</div>
</div>
</div>
</div>
<!-- TOP Bar End -->
<!-- Nav Bar Start -->
<div class="navbar">
<div class="navbar-transparent">
<div class="container">
<div class="navbar-brand ">
<img src="https://zupimages.net/up/21/21/2bac.png" alt="Nav Image">
</div>
<div class="navbar-nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Investment Plans</a>
<a href="#" class="nav-link">News</a>
<a href="#" class="nav-link">Faq</a>
<a href="#" class="nav-link">Rules</a>
<a href="#" class="nav-link">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- Nav Bar End -->
<!-- Money Start -->
<div id="money">
<div class="btn-money">
<a href="#" class="btn-registrer">Register</a>
<a href="#" class="btn-login">Login</a>
</div>
</div>
<!-- Money End -->
</body>
</html>
解决方案
您可以使用display: flex
将元素定位到底部。
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
flex: content;
align-self: end;
}
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
background-size: auto;
height: 565px;
width: 100%;
background-size: cover;
display: flex;
}
推荐阅读
- powershell - 在 Powershell 中添加多行注释
- r - 基于顺序范围 R 组合列
- php - PHP 致命错误:在 null 上调用成员函数 prepare()
- laravel - Laravel检查用户是否有用户名,如果不显示用户ID excel
- liferay-7 - com.liferay.petra.sql.dsl.query.DSLQuery 类型无法解析。它是从所需的 .class 文件中间接引用的
- php - PHP 正则表达式包含附加条件
- python - Kick 使用嵌入保存 i 登录频道
- swift - 未执行 ReactiveSwift 管道 flatMap 主体转换
- c++ - 为什么 Xcode 生成的默认代码是错误的?
- bash - 如何将输入限制为是或否