flex 輸入框布局

YancyYe 發(fā)布于2019-04-23 11:48 / 1313人閱讀

摘要：創(chuàng)建一個(gè)彈性容器構(gòu)建個(gè)或個(gè)彈性項(xiàng)目把彈性項(xiàng)目設(shè)置為居中對(duì)齊改變自身對(duì)齊方式，把它設(shè)置為拉伸以適應(yīng)容器。實(shí)例輸入框布局搜索聯(lián)系電話

1：創(chuàng)建一個(gè)彈性容器(display:flex)

2：構(gòu)建2個(gè)或3個(gè)彈性項(xiàng)目.

3：把彈性項(xiàng)目設(shè)置為居中對(duì)齊.(align-items:center)

4：改變input自身對(duì)齊方式，把它設(shè)置為拉伸以適應(yīng)容器（align-self:stretch）。

實(shí)例：

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

GPU云服務(wù)器云服務(wù)器 flex布局文本框代碼創(chuàng)建布局輸入框輸入框監(jiān)聽(tīng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1175.html

相關(guān)文章

Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤(pán)彈出后遮住輸入框的高度，高度軟鍵盤(pán)出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤(pán)彈出遮擋著后，框會(huì)自動(dòng)上移到可視區(qū)內(nèi)，問(wèn)題定位成功。 Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題移動(dòng)端開(kāi)發(fā)過(guò)程中，我們經(jīng)常遇到h5表單錄入頁(yè)面，在Android系統(tǒng)webview中，由于軟鍵盤(pán)彈出，導(dǎo)致覆蓋 h5頁(yè)面輸入框問(wèn)題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

gclove 2019-08-30 15:54 評(píng)論0 收藏0
Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤(pán)彈出后遮住輸入框的高度，高度軟鍵盤(pán)出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤(pán)彈出遮擋著后，框會(huì)自動(dòng)上移到可視區(qū)內(nèi)，問(wèn)題定位成功。 Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題移動(dòng)端開(kāi)發(fā)過(guò)程中，我們經(jīng)常遇到h5表單錄入頁(yè)面，在Android系統(tǒng)webview中，由于軟鍵盤(pán)彈出，導(dǎo)致覆蓋 h5頁(yè)面輸入框問(wèn)題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

URLOS 2019-08-02 13:56 評(píng)論0 收藏0
Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤(pán)彈出后遮住輸入框的高度，高度軟鍵盤(pán)出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤(pán)彈出遮擋著后，框會(huì)自動(dòng)上移到可視區(qū)內(nèi)，問(wèn)題定位成功。 Android軟鍵盤(pán)彈出，覆蓋h5頁(yè)面輸入框問(wèn)題移動(dòng)端開(kāi)發(fā)過(guò)程中，我們經(jīng)常遇到h5表單錄入頁(yè)面，在Android系統(tǒng)webview中，由于軟鍵盤(pán)彈出，導(dǎo)致覆蓋 h5頁(yè)面輸入框問(wèn)題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

Honwhy 2019-08-23 14:12 評(píng)論0 收藏0
【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

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

kun_jian 2019-08-29 15:39 評(píng)論0 收藏0