<!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. 3D UI场景中，把XY平面的尺寸映射为屏幕像素的数学模型推导

    概述及目录(版权所有,请勿转载,欢迎读者提出错误) 之前用kanzi的3D UI引擎和cocos-2d的时候都有遇到过这个问题,就如何把3D场景中的XY平面的尺寸映射为与屏幕像素一一对应的,即XY平面 ...

  2. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

  3. c#获取word文件页数、字数

    引用命名空间:using Microsoft.Office.Interop.Word; //启动Word程序 Application myWordApp = new ApplicationClass( ...

  4. Spring Boot - StateMachine状态机

    是Spring Boot提供的状态机的现成实现. 理论(有点像工作流) 需要定义一些状态的枚举,以及一些引起状态变化的事件的枚举. 每个状态可以对应的创建一个继承自org.springframewor ...

  5. 数据导出之winform导出word（三）

    本篇文章补充讲解上篇文章中word模板的制作. ① 新建一个word文档 ② 定位到要插入书签的位置 ③ 菜单栏 “插入” -> “书签”,输入书签名,点击“添加” 可以多处位置使用同样的书签名 ...

  6. 使用xargs与awk联合使用批量杀进程,很方便

    ps -ef | grep java | grep alarm | awk '{print $2}' | xargs kill -9 注*A.  $2表示第2列,即进程号PID; awk很强大,这里不 ...

  7. BZOJ 1719--[Usaco2006 Jan] Roping the Field 麦田巨画(几何&区间dp)

    1719: [Usaco2006 Jan] Roping the Field 麦田巨画 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 82  Solved ...

  8. Python 面向对象编程的一些特征 及 单例模式的实现, 父类方法的调用(python2/python3)

    一.面向对象编程几个特征(封装, 继承,多态) 1.封装:类里面封装函数和变量, 在将类进行实例化成实例对象时进行传参, 从而生成不同的实例对象,增加代码的复用. 2.继承:子类可以继承父类的方法和属 ...

  9. JavaScript基础函数和词法分析以及常用的内置对象和使用方法（4）

    day52 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式 ...

  10. FunDA（7）－ Reactive Streams to fs2 Pull Streams

    Reactive-Stream不只是简单的push-model-stream, 它还带有“拖式”(pull-model)性质.这是因为在Iteratee模式里虽然理论上由Enumerator负责主动推 ...