多个div在同一行以相同间隔分布:


这样的布局效果使用非常的频繁，也就是让多个div在一行分布，并且div于div之间的间隙是一样的，多用在对于产品的展示之用，下面就介绍一下如何实现此中布局，代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>div均匀分布代码实例</title>

<style type="text/css">

*{

  margin:0px;

  padding:0px;

}

#box{

  width:430px;

  height:200px;

  background-color:red;

  overflow:hidden;

  margin:100px;

}

#box ul{

  width:440px;

}

#box ul li{

  width:100px;

  height:100px;

  background-color:green;

  float:left;

  margin-right:10px;

  list-style:none;

}

</style>

</head>

<body>

<div id="box">

  <ul>

    <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu/" title="返回顶部">返回顶部</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima/" title="图层代码">图层代码</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima/" title="滚动代码">滚动代码</a></li>

  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian/" title="幻灯片">幻灯片</a></li>

  </ul>

</div>

</body>

</html>

　　

以上代码实现了我们的要求，li元素能够均匀的分布在div中，并且中间的间隔是相同的。
原理非常的简单，就是让li左浮动，然后设置margin-right属性值，也就是li元素之间的间隔，并且div元素具有overflow:hidden属性，这样超出margin-right部分恰好被隐藏，这样就实现了右端没有空白的效果。

div均匀分布代码实例的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. (转)combogrid的代码实例

    EasyUI中combogrid的代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  5. html利用锚点实现定位代码实例

    本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平 ...

  6. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  7. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  8. ajax实现的点击数目加1代码实例

    ajax实现的点击数目加1代码实例:在点击按钮实现数字增加效果代码实例一章节中,介绍如何点击按钮实现数字加1的效果,但是好像并没有什么实际用处,下面就分享一段相对完整的能够在实际应用中派上用场的代码, ...

  9. MATLAB的PLOT函数线型设置及横坐标为字符串的代码实例

    2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[ ...

随机推荐

  1. S（tuple）类及可选（Optional）类型型

    元组将多个值组合为单个值.元组内的值可以是任意 类型,各元素不必是相同的类型.元组在作为函数返 回值时尤其有用. 1.定义方法1 let http404Error= (404,"Not Fo ...

  2. linux下usb驱动接口中端点介绍

    端点 USB 通讯的最基本形式是通过一个称为端点的东西.一个USB端点只能向一个方向传输数据(从主机到设备(称为输出端点)或者从设备到主机(称为输入端点)).端点可被看作一个单向的管道. 一个 USB ...

  3. ionic项目相关的操作命令

     更新npmD:\Program Files\npm-3.9.0\npmnode cli.js install npm -gf vs安装 更新node.js  windows版直接从官网下载安装包 n ...

  4. Spring IOC整理

    示例展示 Spring的一大特点是利用配置的xml文件实现依赖注入. 所谓依赖注入是指把一个业务对象注入另一个业务对象,从而达到对象间的松耦合.(注意是业务对象哦!)依赖注入讲的通俗一点,就是让一个对 ...

  5. java.util.TreeMap源码分析

    TreeMap的实现基于红黑树,排列的顺序根据key的大小,或者在创建时提供的比较器,取决于使用哪个构造器. 对于,containsKey,get,put,remove操作,保证时间复杂度为log(n ...

  6. C#参数化SQL查询

    //写一个存储过程 ALTER PROCEDURE dbo.Infosearch ( @bmid smallint = null, @xm varchar()=null, @xb varchar()= ...

  7. 基础学习总结（六）--getContentRolver()的应用、内容监听者ContentObserver

    ContentResolver / getContentResolver()   外界的程序通过ContentResolver接口可以访问ContentProvider提供的数据,在Activity当 ...

  8. devpress控件属性说明表

    XtraEditors 库中所有控件的公共功能 全部都可以绑定数据: 全部都可以独立使用或用于由 Developer Express 提供的容器控件(XtraGrid.XtraVerticalGrid ...

  9. PHP实现根据浏览器跳转不同语言页面代码

    以下是对使用PHP实现根据浏览器跳转不同语言页面的代码进行了介绍,需要的朋友可以过来参考下 代码: <?php /** * 根据不同浏览器跳转不同页面 * 来源:www.jbxue.com * ...

  10. python自学笔记二

    :#进入循环重输文0件名 pass else:#退出循环,等待创建 break fobj = open(fname,'a')#打开或创建文件 #接下来写入文件 all = [] print('ente ...