如何将按钮内联在网页上
如何将按钮内联在网页上
提问于 2022-08-28 22:54:09
我想知道我怎么能在同一条线上有三个按钮，然后在这条线上居中，在按钮之间有足够的空间。我试过内联-flex，我尝试过内嵌块，各种各样的东西，我只是想不出答案。
.buttoncontainer {
box-sizing: border-box;
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
display: block;
flex-grow: 2;
}
.inlinebutton {
vertical-align: middle;
height:200px;
width: 350px;
color: #fff;
background-image: url('./profile.jpg');
background-size: cover;
padding: auto;
border: 50px;
border-radius: 5%;
cursor: pointer;
}
这是我正在处理的代码。我试图在.buttoncontainer div中封装3个按钮，并将每个单独的内联按钮更改为有不同的代码，但我想知道是否有不同的方法。
我本质上想：
(2) _____
但我有：
( __________ _____ )
(同样抱歉，如果格式化有问题，这是我的第一个问题，我还不太清楚如何使用这个站点)
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-28 23:19:36
使用display:flex是最简单的。您可以在中间对内容进行调整，然后使用gap属性在按钮之间放置足够的空间。如果你只想让按钮间隔均匀，那么就使用对齐内容:空格-均匀，不要使用间隙。参见下面的示例
.flex1 {
display:flex;
justify-content:center;
gap:1rem;
}
.flex2 {
display:flex;
justify-content:space-evenly;
}<div class='flex1'>
<div>
<button>Button1</button>
</div>
<div>
<button>Button1</button>
</div>
<div>
<button>Button1</button>
</div>
</div>
<br><!-- Just a bit of space between the two divs-->
<div class='flex2'>
<div>
<button>Button4</button>
</div>
<div>
<button>Button5</button>
</div>
<div>
<button>Button6</button>
</div>
</div>
有一个很好的资源可以解释它，这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73522836
复制相关文章
相似问题
腾讯云开发者
