zoukankan      html  css  js  c++  java
  • flex左侧固定宽度,右侧自适应布局

    效果图 

    代码实现

    <!DOCTYPE html>  
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        .f{display:flex;} .f1{flex:1;}
        .ac{align-items:center;}
        .w50px{width:50px;}
        .w100{width:100%}
        .form-control{height:32px; border-radius:4px; outline:0; border:1px solid #ccc; padding:4px 11px; transition: all .3s;box-sizing:border-box;}
        .form-control:focus{border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
      </style>  
    </head>  
    <body>
      <div class='f ac'>
        <label class='w50px' for='myName'>姓名:</label>
        <div class='f1'>
          <input placeholder="请输入" class='form-control w100' id='myName' />
        </div>
      </div>
    </body>
    </html>
  • 相关阅读:
    程序员学习参考网站
    博客
    window对象
    事件触发顺序
    element对象
    正则表达式
    Date对象
    Number对象
    Math对象
    Binary Tree Maximum Path Sum
  • 原文地址:https://www.cnblogs.com/jxjl/p/12813350.html
Copyright © 2011-2022 走看看