zoukankan      html  css  js  c++  java
  • 基于flex的不定个数的按钮组

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    
        .buttons-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-item-align: center;
      -webkit-align-self: center;
      align-self: center;
      -webkit-box-lines: single;
      -moz-box-lines: single;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: none;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
    }
    
    .buttons-row .button {
      width: 100%;
      margin-left: -1px;
      color: #0894ec;
      border-color: #0894ec;
      border-radius: 0;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      border: 1px solid red;
      text-align: center;
    }
        </style>
    </head>
    <body>
       <div class="buttons-row">
          <a href="#" class="button">首页 </a>
          <a href="#" class="button">导航 </a>
          <a href="#" class="button">关于我们 </a>
          <a href="#" class="button">联系我们 </a>
          <a href="#" class="button">给我们留言 </a>
       </div>
    </body>
    </html>
  • 相关阅读:
    跨域资源共享 CORS 详解
    C# 每月第一天和最后一天
    jexus http to https
    ASP.NET MVC 路由学习
    jexus
    centos7 添加开机启动项
    jexus docker
    HTTP2.0新特性
    jexus配置支持Owin
    Autofac Named命名和Key Service服务
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/7609585.html
Copyright © 2011-2022 走看看