flex 輸入框布局

YancyYe 發布于2019-04-23 11:48 / 1322人閱讀

摘要：創建一個彈性容器構建個或個彈性項目把彈性項目設置為居中對齊改變自身對齊方式，把它設置為拉伸以適應容器。實例輸入框布局搜索聯系電話

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">GObutton>
    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;
}

GPU云服務器云服務器 flex布局文本框代碼創建布局輸入框輸入框監聽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1175.html

Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

gclove 2019-08-30 15:54 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

URLOS 2019-08-02 13:56 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

Honwhy 2019-08-23 14:12 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0