如何仅使用 css 和 html 正确地并排对齐两个按钮并在它们之间留出一些空间?
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #0c0129;
background-image: url(coding.jpg);
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading {
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
outline: none;
}
.title1 {
display: block;
text-align: center;
color: white;
font-size: 50pt;
font-family: fantasy;
}
.title2 {
display: block;
margin-top: 16px;
text-align: center;
color: white;
font-size: 15pt;
font-family: sans-serif;
}
.register {
margin: 50px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: left;
transition: background-color 1000ms, color 1000ms;
}
.register:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.login {
margin: 20px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: right;
transition: background-color 1000ms, color 1000ms;
}
.login:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
ul {
list-style: none;
}
<div class="heading">
<span class="title1">Banerjee Solutions</span>
<span class="title2">Your one stop shop for everything tech.</span>
<ul>
<li><button class="register">REGISTER NOW</button></li>
<li><button class="login">LOG IN</button></li>
</ul>
</div>
我需要修改什么才能获得我想要的结果?
最佳答案
这是我使用 flex
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
li {
margin: auto;
}
关于html - 如何仅使用 html 和 css 将两个按钮放在同一行中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52495693/