多个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. MVC System.Web.Mvc.ModelClientValidationRule”同时存在

    错误 2280 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“C:\Program Files\Microsoft ASP.NET\ASP.NET ...

  2. blogs

    http://blogs.msdn.com/b/tess/archive/2008/02/04/net-debugging-demos-information-and-setup-instructio ...

  3. sql修改字段长度

    语法: alter table <表名> alter column <字段名> 新类型名(长度) 示例:假如有名T1,字段名F1,原来F1为varchar(3),现在要改为va ...

  4. MPlayerX For Mac白屏问题

    在Mac App store下载了MPlayerX后,如果系统版本是10.10的,用MPlayerX看视屏当选择全屏后会出现白屏现象只有声音退出全屏后仍旧是白屏. 这是因为MPlayerX已经在Mac ...

  5. OC9_代理正向传值

    // // ProtectedDeleagate.h // OC9_代理正向传值 // // Created by zhangxueming on 15/6/24. // Copyright (c) ...

  6. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  7. 数据挖掘：Weka代码学习

    在Eclipse中配置Weka,在Eclipse中新建一个Java Project,然后在Eclipse的Resource目录中,在新new的Project上右键选择Build Path中选择add ...

  8. 2016.10.30 济南学习 Day2 下午 T1

    他 [问题描述] 一张长度为N的纸带,我们可以从左至右编号为0 − N(纸带最左端标号为 0).现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带 的长度是多少. [输入格式] 第一行 ...

  9. cpoint

    #include<iostream> #include<math.h> using namespace std; class CPoint { public: int cpoi ...

  10. 【风马一族_Java】如何获取ACSLL表的值

    消耗两小时,只为一代码. 终于得到了此代码: public class sows { public static void main(String[] args) { byte[] bytes = n ...