flex 输入框布局

YancyYe 发布于2019-04-23 11:48 / 1079人阅读

摘要：创建一个弹性容器构建个或个弹性项目把弹性项目设置为居中对齐改变自身对齐方式，把它设置为拉伸以适应容器。实例输入框布局搜索联系电话

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

专线服务 idc机房托管 flex布局文本框代码创建布局输入框输入框监听

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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