如何在分配文本輸入固定字體大小時使文本輸入和按鈕高度相同？

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

我想創建一個簡單的文本和按鈕的頁面。的要求是：

的文本和按鈕均在底部，
中的文字和按鈕具有相同的高度和對齊，
的文本已固定的字體大小（例如50像素）

我該如何做到這一點？文字比現在的按鈕大得多。

來源

2016-08-02 neolicd

Flexbox，就可以做到這一點：

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

來源

2016-08-02 11:07:51

完美解決，謝謝！ – neolicd

如何在分配文本輸入固定字體大小時使文本輸入和按鈕高度相同？

回答

相關問題