wie man Texteingabe macht und Knopf die gleiche Höhe, wenn die Texteingabe örtlich festgelegte Schriftgröße zuweist?

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 

 
form { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
form input { 
 
    width: 90%; 
 
    font-size: 50px; 
 
    vertical-align: middle; 
 
} 
 

 
form button { 
 
    width: 9%; 
 
    vertical-align: middle; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <form> 
 
     <input id="m" type="text"> 
 
     <button>POST</button> 
 
    </form> 
 
</body> 
 
</html>

Ich möchte einen einfachen Text-und-Taste Seite erstellen. Die Forderung ist:

Der Text und die Taste ist sowohl auf der Unterseite,
Der Text und die Taste, um die gleiche Höhe aufweisen und ausgerichtet sind,
Die Textschriftgröße festgelegt ist (zum Beispiel 50 Pixel)

Wie kann ich das erreichen? Der Text ist jetzt viel größer als der Button.

Quelle

2016-08-02 neolicd

Flexbox das tun können:

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
form { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: flex; 
 
} 
 
form input { 
 
    width: 90%; 
 
    font-size: 50px; 
 
} 
 
form button { 
 
    width: 9%; 
 
}

<form> 
 
    <input id="m" type="text"> 
 
    <button>POST</button> 
 
</form>

Quelle

2016-08-02 11:07:51

Perfekt gelöst, danke! – neolicd

wie man Texteingabe macht und Knopf die gleiche Höhe, wenn die Texteingabe örtlich festgelegte Schriftgröße zuweist?

Antwort

Verwandte Themen