zoukankan      html  css  js  c++  java
  • flex 布局的页面

    <!DOCTYPE html>
    <html>
    <head>
    <title>横向滑动</title>
    <style type="text/css">
    .flex-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }

    .flex-row {
    display: flex;
    flex-direction: row;
    }

    .form-row {
    height: 30px;
    line-height: 30px;
    margin-bottom: 12px;
    }

    .form-row label {
    min- 120px;
    text-align: right;
    }

    .form-row input{
    150px;
    margin-left: 15px;
    }
    </style>
    </head>
    <body>
    <div class="flex-row-wrap">
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    <div class="form-row flex-row">
    <label for="">哈哈哈:</label>
    <input type="text">
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Jenkins:自动生成iOS包遇到的问题
    Jenkins将构建结果发送至钉钉群的实现
    Selenium常见API
    Jenkins配置Maven工程
    Appium多设备并行
    使用Docker安装MySQL
    Selenium无界面执行
    mysql 进阶查询(学习笔记)
    xshell 常用命令
    mysql 常用语句
  • 原文地址:https://www.cnblogs.com/fdbk/p/12893412.html
Copyright © 2011-2022 走看看