我怎么把这些<a>
位于 div 的中心,在 100% 宽度的 div 中彼此相邻,它们之间有 40px 的空间?
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
最佳答案
您可以通过在 #container
上使用 display:flex
和 justify-content:center
来做到这一点
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
a.explore:first-child {
margin-right:40px;
}
#container {
width: 100%;
display:flex;
justify-content: center;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
关于html - 2个按钮彼此相邻的宽度边距与CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38439832/