如何使兩個按鈕並排並響應？

我有一個小任務，它需要兩個按鈕並排使用桌面時，然後在移動時，他們堆疊在彼此的頂部，但沒有減少大小。如何使兩個按鈕並排並響應？

我已經設法使他們堆疊在一起，但他們是不同的大小？每當我定義按鈕的百分比大小時，它們會使它們在設備視圖中擠在一起並看起來很醜。

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

來源

2017-08-08 Jasmine

你可以請你展示你的HTML嗎？ –

你好茉莉花，你能提供你的代碼在HTML部分jsfiddle –

我不習慣jsfiddle，所以我希望這是有幫助的！ https://jsfiddle.net/#&togetherjs=MK4G42vSV0 – Jasmine

總結他們在一個div，給他們percentage width，使格已經

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

填充可能可能陷入困境的反應，所以要意識到這一點，以及

來源

2017-08-08 09:13:15 grabnem

謝謝！我最後將它們包裝在一個名爲container的div中，並使用了text-align：center。但將來我會用這個！嗨，我知道。幸運的是，他們所要求的觀點看起來沒問題！ – Jasmine

@Jasmine谷歌的東西像flex froggy，它的一些遊戲，你在CSS學習flex，這是非常有用的，比使用引導網格更好imo – grabnem

如何使兩個按鈕並排並響應？

回答

相關問題