資訊專欄INFORMATION COLUMN
摘要：創(chuàng)建一個彈性容器構(gòu)建個或個彈性項目把彈性項目設(shè)置為居中對齊改變自身對齊方式，把它設(shè)置為拉伸以適應(yīng)容器。實例輸入框布局搜索聯(lián)系電話
1：創(chuàng)建一個彈性容器(display:flex)
2：構(gòu)建2個或3個彈性項目.
3：把彈性項目設(shè)置為居中對齊.(align-items:center)
4：改變input自身對齊方式，把它設(shè)置為拉伸以適應(yīng)容器（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">GObutton>
div>
<div class="items-1">
<label class="name">聯(lián)系電話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; }
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1175.html
摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題 移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家 系統(tǒng)：An...
摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題 移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家 系統(tǒng)：An...
摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題 移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家 系統(tǒng)：An...
摘要：任務(wù)四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一 任務(wù)四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優(yōu)化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
閱讀 1142·2021-11-08 13:13
閱讀 1723·2019-08-30 15:55
閱讀 2775·2019-08-29 11:26
閱讀 2441·2019-08-26 13:56
閱讀 2563·2019-08-26 12:15
閱讀 2144·2019-08-26 11:41
閱讀 1406·2019-08-26 11:00
閱讀 1544·2019-08-23 18:30
