gpt4 book ai didi

html - 如何使两个按钮并排响应?

转载 作者:行者123 更新时间:2023-11-28 00:54:28 28 4
gpt4 key购买 nike

我有一个小任务,它需要在使用桌面时并排放置两个按钮,然后在移动设备上将它们堆叠在一起但尺寸没有减小。

我已经设法让它们堆叠在一起,但它们的尺寸不同?每当我定义按钮的 % 大小时,它们都会挤压在一起,并且在设备 View 中看起来很丑陋。

.button {
background-color: #f2f2f2;;
border: none;
color: #737373;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
border: 2px solid #003366;
font-family: sans-serif;
font-style: italic;
font-weight: bold;
font-size:0.875em;
display: inline-block;}
.button2 {
background-color: #003366;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
border: 2px solid #003366;
font-family: sans-serif;
font-style: italic;
font-weight: bold;
font-size:0.875em;
display: inline-block;}
<div class="booking">
<h2><i class="fa fa-check-circle" aria-hidden="true"
style="color:#33cc33;""> </i> Congratulations your jet2 holiday
booking has been confirmed</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur inventore, dignissimos quasi fuga sunt, nihil nemo
labore? Molestiae, eum, eos! Illum non laborum asperiores,
mollitia minima quasi atque. Eligendi, atque.</p>


<button class="button">Cancel</button>
<button class="button2">Continue</button>

</div>


最佳答案

将它们包裹在一个div中,给它们百分比宽度,让div有

div{
display: flex;
justify-content: space-between;
}

填充可能会扰乱响应,所以也要注意这一点

关于html - 如何使两个按钮并排响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45563138/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com