前几天在公司修改一个css 多个按钮居中问题，其实这样的问题很多前端程序员都遇到过，举个例子吧：

在一行中有三个按钮或是两个按钮...个数不定，然后间距固定；然后就有很多人把所有按钮放到一个div中，把div置为margin:10px auto(距上10像素，居中，然后又给了一个固定宽度，按钮放在这个div中，这样按钮就不能具体居中了) ，也不通用如果按钮减少到两个 或一个怎么办，

也有很多人用javascript 动态的算出宽度然后计算一大堆，并且很多时候比好用

错误代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

     .foot{width: 100%; height: 30px; border: 1px solid #d2d2d2;}

     .foot .b{width:300px; margin: 3px auto;}

     .foot .b .button{display: inline-block;line-height: 20px; background-color: #900; padding: 3px 5px; margin-left: 10px;}

     </style>

 </head>

 <body>

 <div class="foot">

     <div class="b">

         <a href="" class="button">提交</a>

         <a href="" class="button">提交</a>

         <a href="" class="button">提交</a>

     </div>

 </div>

 </body>

 </html>

后来修改如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

    .foot{width: 100%; height: 30px; border: 1px solid #d2d2d2; text-align: center;}

    .foot ul{display: inline; margin-left: -10px;}

    .foot ul li{display: inline-block; margin-left: 10px; line-height: 30px;}

    .foot ul li a{background-color: #900; color: #fff;line-height: 20px;padding: 3px 5px;}

    </style>

</head>

<body>

<div class="foot">

    <ul>

        <li><a href="" class="button">提交</a></li>

        <li><a href="" class="button">提交</a></li>

        <li><a href="" class="button">提交</a></li>

        <li><a href="" class="button">提交</a></li>

    </ul>

    </div>

</div>

</body>

</html>

其实这些问题看上去很简单，单还是有很多初学者不能实现，很多人也行用javascript实现，其实完全没有必要

css 多个不定数量提交按钮居中显示，纯css解决的更多相关文章

  1. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  2. 绝对定位多个字居中显示的css

    在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box ...

  3. css实现一段不够一行时居中显示，多于一行时两端对齐

    今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看: 居中 两端对齐 一开始想用text-align-last:center; 可是这样结果是这样的: 单行的居中了 可是多行的最后一行也居 ...

  4. Android 一排按钮居中显示

    将一排按钮放在LinearLayout中,设置LinearLayout的Android gravity属性为center_vertical(垂直居中)

  5. CSS图片Img等比例缩放且居中显示

    常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...

  6. DWZ按钮居中显示

  7. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  8. 简单的纯css重置input单选多选按钮的样式--利用伪类

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...

  9. Android Hack1 使用weight属性实现视图的居中显示

    本文地址:http://www.cnblogs.com/wuyudong/p/5898403.html,转载请注明源地址. 如果要实现如下图所示的将按钮居中显示,并且占据父视图的一半,无论屏幕是否旋转 ...

随机推荐

  1. C++虚方法（虚函数）随笔

    本文不讨论虚函数的原理,只简单总结下虚函数的常用事项. 虚函数(虚方法)是C++动态联编 实现多态的重要手段,在函数声明时使用关键字virtual即可,如: virtual void func(voi ...

  2. MFC中ClistCtrl的=NM_CUSTOMDRAW消息

    =NM_CUSTOMDRAW是你点击列表内部是的消息映射: 例如:我想在我删除一行列表的数据,但是删除后下一行数据继续保持高亮状态 void CChildView::OnDel() { int cou ...

  3. html学习心得

    注释:浏览器会自动地在段落的前后添加空行.(<p> 是块级元素) 提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯.用 <br /> 标 ...

  4. hadoop2的高可用性

    1   hadoop2  namenode由一个节点变成两个节点,同时在线,且同时只有一个是活跃的,如果一个出了问题,另外一个立即接替:没必要配置Secondary NameNode.Checkpoi ...

  5. handlebars，each循环里面套each循环

    handlebars可以用each自动进行循环,下面介绍一下each循环里面套循环来着. html代码 !DOCTYPE html> <html> <head> < ...

  6. Orchard中的命令行工具

    在Orchard中提供了一个命令行工具,我们可以使用这个命令行工具创建用户.创建博客.生成代码.配置网站.打包模块等.并且这个命令行工具是可以扩充的,只要我们在自己开发的模块中创建一个Command类 ...

  7. BZOJ 1597 土地购买

    斜率优化... #include<iostream> #include<cstdio> #include<cstring> #include<algorith ...

  8. mov和ldr/str的区别

    ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成,也就是ldr/str指令.比如想把数据从内存中某处读取到寄存器中,只能使用ldr比如:ldr r0, 0x12345678就 ...

  9. 《看板与Scrum》读书笔记

    看板的朴素思想:在制品(work-in-progress, WIP)必须被限制 WIP上限和拉动式生产 1. Scrum与看板简述 Scrum:组织拆分,工作拆分,开发时间拆分,优化发布计划,过程优化 ...

  10. 黑苹果-IOS学习的开始

    深知安装黑苹果的不易,在这里写一下关于我的Thinkpad E430c安装黑苹果教程(Mac版本:Yosemite 10.10.4),希望能够帮助有需要的朋友. 首先贴上我的电脑配置报表: ----- ...