的按钮 <input> 字体大小太小时上升

Question

I'm trying to make a to-do list, but the button always goes a bit up whenever I make the text smaller. Any help?

 * { margin: 0; padding: 0; } input:first-letter { text-transform: capitalize; } input { height: 19px; margin-top: 20px; background-color: #222222; border: 0px; color: white; text-align: center; height: 50px; width: 299px; font-size: 20px; } button { height: 52px; width: 51px; font-size: 40px; background-color: #0095FF; border: 0px; color: white; } button:hover { background-color: #0077FF; } #output { background-color: #EEEEEE; width: 350px; height: 600px; } 

 <form id="form"> <input id="input" placeholder="To-Do List"></input> <!-- --> <button id="+">+</button> </form> <div id="output"></div> 

And if possible, could you please tell me how I could automatically capitalize the first letter of the input without any external libraries?

Thanks.

Answer 1

 * { margin: 0; padding: 0; } input:first-letter { text-transform: capitalize; } input { height: 19px; background-color: #222222; border: 0px; color: white; text-align: center; height: 50px; width: 299px; font-size: 20px; text-transform:capitalize; } button { height: 50px; width: 51px; font-size: 35px; background-color: #0095FF; border: 0px; color: white; } button:hover { background-color: #0077FF; } #output { background-color: #EEEEEE; width: 350px; height: 600px; } .form-1 { float: left; } .form { float: left; } 

 <form id="form"> <div class="form-1"> <input id="input" placeholder="To-Do List"></input></div> <!-- --> <div class="form"> <button id="+">+</button></div> </form> <div id="output"></div> 

Answer 2

change height of button

button {
    height: 50px;}

add float and remove margin-top of iput

input {
/* margin-top: 20px; */
float: left;}