<!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>

基于flex的不定个数的按钮组的更多相关文章

  1. Bootstrap3系列：按钮组

    1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...

  2. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  3. scala 学习笔记(03) 参数缺省值、不定个数参数、类的属性(Property)、泛型初步

    继续学习,这一篇主要是通过scala来吐槽java的,同样是jvm上的语言,差距咋就这么大呢? 作为一个有.NET开发经验的程序员,当初刚接触java时,相信很多人对java语言有以下不爽(只列了极小 ...

  4. bootstrap按钮组

    种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...

  5. VC++ 动态生成 成组的 RadioButton 按钮组

    先说一下 静态创建的方法: 单选按钮也属于CButton类,但由于单选按钮总是成组使用的,所以它在制作和使用上与普通按钮有一定区别.假设有三个单选按钮组成一组,初始时,第一个单选按钮处于选中状态.我们 ...

  6. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  7. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  8. Bootstrap--组件之按钮组

    什么是按钮组呢?简单解释:就是把一堆的按钮放在一行或者一列中.下面来看一个实例. 按钮组嘛,首先是按钮,所以会用到.btn这个类,还有就是bootstrap提供的按钮组.btn-group这个类,所以 ...

  9. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

随机推荐

  1. Scala中()与{}

    Scala中()与{}的关系 在Scala中有些时候()和{}是可以相互替换的,但是如果不弄清楚到底什么时候该用(),什么时候该用{},什么时候二者可以相互替换,那么在写代码的时候难免为出错,并且自己 ...

  2. log.debug(e.getMessage());

    private static final Log log = LogFactory.getLog(AbcAction.class); @ManagedProperty(name = "abc ...

  3. 【转】PHP操作MongoDB【NoSQL】

    原文:http://blog.sina.com.cn/s/blog_4b67d3240101519b.html 一.MongoDB简介 MongoDB (名称来自"humongous&quo ...

  4. linux系统编程之文件与IO（六）：实现ls -l功能

    本文利用以下系统调用实现ls -l命令的功能: 1,lstat:获得文件状态, 2,getpwuid: #include <pwd.h> struct passwd *getpwuid(u ...

  5. GridView1 RowDataBound

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == ...

  6. Linux(Debian)网卡设置

    debian IP地址配置 vim /etc/network/interface   配置网卡eth0的IP地址 auto eth0 表示网卡随系统自动请 iface eth0 inet static ...

  7. NetCore偶尔有用篇：NetCore项目添加MIME

    一.简介 1.系统默认给我们提供的一些文件类型的处理方式. 2.系统没有为我们提供处理的文件类型无法使用,例如:apk 3.这里候就需要自己添加MIME,才能进行访问 4.下面就是添加apk访问的示例 ...

  8. The rapid development platform upgrade, leave the time to yourself, the work is lost to the soft platform

    Bring me back to your home. Please leave your work behind! Soft agile development framework V7.0 new ...

  9. MYsql 之多表查询.

    http://www.cnblogs.com/wangfengming/articles/8067220.html

  10. Flask系列01--flask认识, 启动, 响应

    一. 四款python web框架简单总结 Django : 优点 - 大而全所有组件都是有组织内部开发高度定制化 教科书级别的框架 缺点 - 浪费资源,请求的时候需要的资源较高 Flask : 优势 ...