前几天在公司修改一个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. WebStrom 10 注册码（转）

    webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...

  2. java 接口和抽象类的区别

    java 接口和抽象类的区别抽象类:1.含有抽象方法的类一定为抽象类,反过来抽象类,不一定含有抽象方法:2.抽象类必须用abstract来进行定义,抽象方法也必须用abstract来进行定义:3.抽象 ...

  3. 一道google面试题

    输入n,把1-n分成两个和相等的子集,有多少种分法 想了个dp,直接背包也行 #include <iostream> #include <cstdio> using names ...

  4. 准备再次开始更新文章，做了10年.net,有项目需要转java

    不仅要转java,而且还要直接上liferay portal ,一下子要学好多.

  5. esrdtfyghjk

    两融余额止跌回升,金融股回落飘绿,千股涨停续演,沪指收复4000点未果涨逾2% 相关报道 [今日收盘]灾后重建激情抢筹 大盘两日反弹500点 [今日收盘]沪指涨近6%重回3700点 未停牌个股九成涨停 ...

  6. IOS一些高效的第三方框架库

    MBProgressHUD ——进展指示符库 苹果的应用程序一般都会用一种优雅的,半透明的进度显示效果,不过这个API是不公开的,因此你要是用了,很可能被清除出AppStore.而 MBProgres ...

  7. 折腾Ubuntu下的android studio

    ps:网速很慢,耗时一天多.先吐槽一下搭建很麻烦,毕竟现在在ubuntu上用as的人还不太多,很多步骤最好先自备梯子. 测试环境: ubuntu 14.04 LTS 64bit 安装的东西无非就是an ...

  8. overflow:hidden清楚浮动的影响

    在网页布局中有时会遇到这种情况: 如果左边用<dt>,右边用<dd>,放在一行显示,<dt>要设置float:left,这个应该都知道,问题是,第一行这样做没有问题 ...

  9. js数字时钟

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. idea-生成key的Java代码

    import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.Scanne ...