前几天在公司修改一个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. 使用phantomjs实现highcharts等报表通过邮件发送（本文仅提供完整解决方案和实现思路，完全照搬不去整理代码无法马上得到效果）

    前不久项目组需要将测试相关的质量数据通过每日自动生成报表展示,并自动通过将报表作为邮件正文内容知会到干系人邮箱.那么问题来了,报表生成了,但是邮件怎么发送,因为highcharts等报表都是通过JS和 ...

  2. 怎么在excel中快速查找重复记录

    假设数字在A列,数字从A1开始:方法一:辅助列中输入公式,数据重复时会出现“重复”提示.=IF(COUNTIF(A:A,A1)>1,"重复","") ,下 ...

  3. ubuntu下avd创建和文件传输

    进入安卓官网下载安卓sdk并解压到指定路径 在命令行模式下进入安卓文件的toos文件夹下 android avd #在弹出的对话框中新建虚拟机 adb install ~/targetPath/hel ...

  4. Qt for Android开发Android应用时的各种错误汇总(此片博文不成熟，请大家略过)

    “Qt for Android真的很脆弱,项目能跑起来靠的是奇迹,跑不起来,各种报错才是正常...” 问题一:Qt for Android编译不过:make (e=2): 系统找不到指定的文件. 之前 ...

  5. C++学习笔记31:术语翻译

    reference:引用 dereference:引领,好于"解引用" type:型式,好于"类型" int:整数型式,简称整型 class:类型式,简称类型 ...

  6. Unity3D-坐标转换笔记

    Transform.TransformPoint 作用 : 将一个点从以自身为坐标系的本地坐标转换成世界坐标 Transform.InverseTransformPoint 作用 : 将一个点从世界坐 ...

  7. Day21_IO第三天

    1.IO体系总图 2.字符流体系图 记忆路线:输入输出流前面加File和Buffered,这就记住6个了,还剩两个转换流名字比较特殊,需要着重记一下(转换流:字节和字符的组合,所以起名字叫InputS ...

  8. 系统中异常公共处理模块 in spring boot

    最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...

  9. http 学习 1-2 chapter2-URL与资源

    URL是因特网资源的标准化名称.URL指向每一条电子信息,告诉他们位于何处,以及如何与之进行交互. URL语法,以及各种URL组件的含义及其所做的工作. 很多Web客户端都支持额URL快捷方式,包括相 ...

  10. sublime text 2 ubuntu安装及插件管理

    参考 dudumao 1.下载Sublime Text2官网下载地址:http://www.sublimetext.com 2.安装Sublime Text2解压即可使用 $ sudo tar -jx ...