如何使两个按钮并排响应? [英] How do I make two buttons side by side and responsive?
本文介绍了如何使两个按钮并排响应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个小任务,在使用台式机时,它需要两个按钮并排放置,然后在移动设备上,两个按钮彼此叠放,但尺寸没有减小.
I have a small task where it requires the two buttons side by side when using a desktop, and then when on mobile they are stacked on top of each other but have not decreased in size.
我设法使它们彼此堆叠,但是它们的大小不同?每当我定义按钮的%大小时,它们在设备视图中都会挤在一起并看上去很丑.
I have managed to make them stack on top of each other but they are different sizes? Whenever I defined the % size of the buttons it makes them squish together and look hideous when in device 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具有
Wrap them in a div, give them percentage width
, make div have
div{
display: flex;
justify-content: space-between;
}
填充可能会破坏响应能力,所以也要注意
Padding could possibly mess up the responsiveness,so be aware of that as well
这篇关于如何使两个按钮并排响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文