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>

  • 相关阅读:
    XML应用程开发--下
    XML应用程序开发--上
    TCP通信客户端简单示例
    TCP网络通信服务器端简单示例
    XML基本内容学习笔记
    如何在Qt的widget上右键显示菜单
    关于双指针遍历
    常见的四种排序算法
    JAVA Class13
    JAVA练习
  • 原文地址:https://www.cnblogs.com/fdbk/p/12893412.html
Copyright © 2011-2022 走看看