多个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. node.js安装方法总结

    为了保持一致,这里也列举三个方法 第一个方法:通过官网下载安装 https://nodejs.org/en/download/ 这种方式的问题是我们需要自己去找网页,找到链接,然后下载 第二个方法:使 ...

  2. 在ASP.NET中发送电子邮件的实例教程

    首先.导入命名空间: 代码如下 复制代码 using System.Net.Mail; 定义发送电子邮件的方法[网上很多不同的,可以对比着看一下,WinForm的也适用]: 代码如下 复制代码 /// ...

  3. iOS-RunLoop，为手机省电，节省CPU资源，程序离不开的机制

    RunLoop是什么?基本操作是什么? 1.RunLoop的作用 RunLoop可以: 保持程序的持续运行 处理App中的各种事件(比如触摸事件.定时器事件.Selector事件) 节省CPU资源,提 ...

  4. UI5_UINavigation传值

    // // AppDelegate.m // UI5_UINavigation传值 // // Created by zhangxueming on 15/7/7. // Copyright (c) ...

  5. Ajax_2

    <script> var xmlHttp;//创建一个对象 function queryDetail(id){ if(window.ActiveXObject){ xmlHttp = ne ...

  6. 1.linux概述及如何访问

    1.linux终端访问及退出 1.1访问 linux有7个终端:(1个真实终端+6个虚拟终端) ctril+alt+Fn (Fn是指F1\F2..)切换终端 1.2退出: shutdown 缓冲一会关 ...

  7. linux kernel with param

    Linux kernel support pass param to kernel, this params can be assigned at load time by insmod or mod ...

  8. 返璞归真vc++之字符类型

    在今天,大量使用java与.net的程序员已经很少去真实了解字符的底层表达,但是使用VC++编程,对字符的处理却非常慎重,刚学习vc++肯定会为其中的字符类型给晕头转向,今天本人学习第一节,从字符开始 ...

  9. SharedSDK微信分享不成功，分享之后没有反应

    对于一般来说,使用SharedSDK的时候,分享不成功不外乎下面几个原因: 1.测试没有打包2.打包的keystore跟微信开放平台上面的不一致, 导致MD5码不一致3.分享参数错误4.应用没有审核通 ...

  10. 清空系统日志shell scripts——自学笔记

    这是一个清空系统日志的脚本: vim logmess_clean.sh #bin/bash        //该脚本所使用的shell解释器 cd /var/log/  //切换到存放日志目录 ech ...