如何將按鈕與輸入對齊

Question

那。 我如何使該按鈕與輸入對齊。 我嘗試使用百分比，但只能在特定屏幕上使用。 在這種情況下我正在使用flexbox，我不知道那是不是

 .Contact-form{ display: flex; align-items: center; flex-direction: column; padding: 1em; width: 45%; } .Contact-input{ width: 90%; padding: .9em; border: 0; } .Contact-input:focus{ outline: none; } .btn{ width: 100%; background-color: #da2929; box-shadow: 0px 8px 1px #671212; color: white; font-size: 1.5em; font-weight: 700; padding: .5em; } 

 <form action="" class="Contact-form"> <input type="text" placeholder="Nombre" class="Contact-input" required="true"> <input type="text" placeholder="Apellido" class="Contact-input"> <input type="email" placeholder="correo@ejemplo.com" class="Contact-input" required="true"> <input type="submit" value="Subscribeme" class="Contact-input btn"> </form> 

Answer 1

假設輸入按鈕為.btn，則其寬度為100％，而文本輸入的寬度為90％，這就是為什么存在差異的原因。

您可以通過以下兩種方式處理：1）從.btn和.Contact-input中完全刪除寬度聲明（這將使它們都占據全部100％的寬度），或者2）顯式地將兩個元素設置為具有相同的寬度

Answer 2

我通過添加box-sizing: border-box;解決了這個問題box-sizing: border-box; 在.Contact-input 。 我可能需要為每個瀏覽器添加必要的前綴。