Button für geht hoch, wenn die Schriftgröße zu klein ist

Question

Ich versuche eine To-Do-Liste zu erstellen, aber der Button geht immer ein bisschen hoch, wenn ich den Text verkleinere. Irgendeine Hilfe?

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

Und wenn möglich, könnten Sie mir bitte sagen, wie ich automatisch den ersten Buchstaben des Eingangs ohne externe Bibliotheken nutzen könnte?

Danke.

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

Änderung Höhe Taste

button { 
    height: 50px;} 

float hinzufügen und margin-top of entfernen iput

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