Question

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

我设法让它们叠在一起，但它们的大小不同？每当我定义按钮的％大小时，它就会使它们挤压在一起，并且在设备视图中看起来很可怕。

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 1

将它们包裹在div中，给它们percentage width，让div有

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

Padding可能会破坏响应能力，所以也要注意这一点

如何并排制作两个按钮并做出响应？

1 个答案: