1：創建一個彈性容器(display:flex) 2：構建2個或3個彈性項目. 3：把彈性項目設置為居中對齊.(align-items:center) 4：改變input自身對齊方式，把它設置為拉伸以適應容器（align-self:stretch）。 實例： ...
1：創建一個彈性容器(display:flex)
2：構建2個或3個彈性項目.
3：把彈性項目設置為居中對齊.(align-items:center)
4：改變input自身對齊方式，把它設置為拉伸以適應容器（align-self:stretch）。
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex輸入框佈局</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="items-1"> <label class="name">搜索</label> <input class="ipt" type="text"> <button class="btn">GO</button> </div> <div class="items-1"> <label class="name">聯繫電話</label> <input class="ipt" type="text"> </div> </div> </body> </html>
.main{ max-width: 350px; margin: 100px auto; font-size: 14px; } .items-1{ display: flex; flex-direction: row; background: #eee; border: 1px #ccc solid; align-items: center; height: 32px; margin-top: 10px; } .items-1 .ipt{ flex: 1; border: 0px; align-self: stretch; padding: 0 4px; } .items-1 .name{ padding: 0 8px; } .items-1 .btn{ border: 0px; padding: 0 10px; }
