前几天在公司修改一个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. 使用NFC读卡器ACR122u读取银行卡信息

    使用NFC读卡器  ACR122u 使用ACR122u Tool 软件发送spdu指令即可 一些运行结果 如上所示,银行卡的卡号,有效期,卡主姓名,身份证号,进期消费记录均可读出

  2. 【Python】一、除法问题及基本操作（逻辑与，if替代switch）及支持中文打印

    1.查看版本 C:\Users\XXX>python -V Python 2.7.1 2.除法问题(不要整除) from __future__ import division tmp=0x3ec ...

  3. JQuery的一些简单操作02

    一.遍历 1.向下遍历,children.find children只能向下遍历儿子节点的所有元素,find遍历当前元素下面的所有子节点 2.向上遍历,parent,parents,parentsUn ...

  4. C/C++读入一行不定个数的整数

    我想,每个人一开始遇到这个问题,都会觉得挺简单的.但真正实施的时候,可能就会觉得还是有点坑的.毕竟对于C/C++这样成熟而使用广泛的语言而言,对于这个简单的问题竟然没有一个简洁有力甚至一行代码的解决方 ...

  5. 配置和创建一个hibernate简单应用

    1.配置 到http://hibernate.org/orm/下载hibernate包然后解压 在eclipse中新建一个java project,如名为hibernate_test 再所建工程中新建 ...

  6. AI第一次作业

    1.   你认为什么是人工智能?     在我看来,人工智能是是对人的意识.思维的信息过程的高度模拟,虽然它不是人的智能,但是高度模仿人的思考方式,加上它的信息高度集中,对信息的处理速度快,甚至于超过 ...

  7. Adobe Dreamweaver代码编辑

    Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...

  8. 【已解决】关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    近日在使用SQL Server 2008的过程中,修改已创建完成的表结构时,却一直提示弹出如下提示: 不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻 ...

  9. XML代码生成器——XMLFACTORY 简介（四）

    XML代码生成器——XMLFACTORY 简介(四) 这一篇我们讲“类属性”页签的配置功能,您将了解到:如何为元素子值指定类属性的名称,数据类型,及容器类型. 如果,你没看过这个系列的第一篇文章,请先 ...

  10. linux 关机要点

    主要围绕 sync shutdown reboot这几个指令 将数据同步写入硬盘中的挃令: sync:关机前要保存进硬盘.事实上sync也可以被一般账号使用喔!只丌过一般账号用户所更新的硬盘数据就仅有 ...