[英]Aligning button / boxes side-by-side (instead of vertically)
這是 HTML:
<a href="#" class="btn third">Pull Card At Random</a>
<a href="#" class="btn third">Choose card from album</a>
這是CSS:
.third {
border-color: crimson;
color: black;
box-shadow: 0 0 40px 40px crimson inset, 0 0 0 0 crimson;
transition: all 150ms ease-in-out;
width: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
padding: 2%;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-weight: 700;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
}
a:visited {
color: white;
}
a:link {
color: white;
}
請注意,兩個深紅色的盒子堆疊在一起,一個疊在一起。 如果我想將它們水平放置,使它們彼此左右,我需要在 CSS 中更改什么?
我已經使用過的資源:
沒有指定元素是否應該居中,但從display: flex
切換到display: inline-block
會給你想要的結果(我猜)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.