前几天在公司修改一个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. 在linux使用make编译ArduPilot for Pixhawk/PX4 ArduPilot 编译环境搭建

    Building ArduPilot for Pixhawk/PX4 on Linux with Make 使用Make编译 ArduPilot for Pixhawk 2, Pixhawk and ...

  2. varnish 内置函数详细说明

    Subroutine列表 •vcl_recv 在请求开始时候被调用,在请求已经被接收到并且解析后调用.目的就是决定是否处理这个请求,怎么处理,使用哪个后端.vcl_recv以return结束,参数可以 ...

  3. C语言状态机

    转载声明 如果转载本博客内容,请联系869119842@qq.com,获得作者书面授权 前言 状态机的好处不用多说,自己百度去,但传统的编程模式,无论是C语言,或是硬件FPGA的Verilog都是采用 ...

  4. PyCharm 3.4.1注册码

    PyCharm 3.4下载地址:http://www.jetbrains.com/pycharm/download/index.html PyCharm 3.0 注册码 PyCharm3 序列号 Li ...

  5. 关于C语言编译器Dev c++的调试

    大家应该都安装了C语言的编译软件,不过我个人认为Dev C++比VC6.0好用,所以只是说明DEv C++软件的调试方法 如果英文不好的,可以先汉化,再调试. 汉化:工具-----环境选项------ ...

  6. Linux文件系统层次结构标准

    该标准的目的是定义Linux文件系统的标准路径,使得开发者和用户可以在合理的位置找到需要的东西. Linux的文件布局的大体想法是将文件和目录分为如下3组: 对运行Linux的某一特定系统唯一的文件和 ...

  7. C#双链表

    单链表允许从一个结点直接访问它的后继结点,所以, 找直接后继结点的时间复杂度是 O(1).但是,要找某个结点的直接前驱结点,只能从表的头引用开始遍历各结点.如果某个结点的 Next 等于该结点,那么, ...

  8. BZOJ3669 （动态树）

    Problem 魔法森林 (NOI2014) 题目大意 给n个点,m条边的无向图,每条边有两个权值a,b. 求一条从1-->n的路径,使得这条路径上max(a)+max(b)最小.输出最小值即可 ...

  9. 一款基于bootstrap的datetimepicker

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  10. 重写代码生成器支持模板（多层架构，MVC），多语言c#,java；支持mysql和sqlserver，动态编译

    多年前用过李天平前辈的,自己改过,后来李老师做动软了,不给源码,修改不是很方便.加上我目前需要转java方向,于是决定自己搞.到目前为止花了整整一个星期了,看看目前的成果. 最后是代码工程文件,用c# ...