效果如下:

HTML代码如下:

<div class="overdiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>

CSS如下:

/* @reset */
body{background-color:#FFFFFF;} /* ==== demo ==== */
* {
margin:0;
padding:0;
}
.overdiv {
width:290px;
height:300px;
overflow:hidden;
background-color:#436973;
}
.overdiv ul {
list-style:none;
width:320px;
height:auto;
}
.overdiv li {
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#83B1DF;
text-align:center;
line-height:80px;
}

  

横排列表(li)的左右对齐的更多相关文章

  1. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  2. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  3. ul列表li元素横排显示的IE兼容性问题

    目标: 使ul列表横排显示 现象: 谷歌OK,火狐竖排,IE竖排. 原因: ul原css代码: 首先,去除点号,list-style:none;为了使其横排,使用了display:contents;该 ...

  4. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  5. CSS图片两端对齐,自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  6. Html 列表 li ul使用

    html中偶尔会使用到列表,记录一下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  7. ul li排版 左右对齐

    定义两个ul的class, 一个向左浮动, 一个向右浮动 #navtop{      width:100%;      height:46px;      background-color:#ecf0 ...

  8. js 点击列表li,获得当前li的id

    html <ul id="demo"> <li id="li-1">li1</li> <li id="li- ...

  9. 【8.0、9.0c】树形列表 列标题 不对齐的问题及解决方案

    树形视图状态经常会碰到字体上下排列不整齐的问题,虽不是什么大问题,但对某些处女座的人来说,真的是如鲠在喉,今天我们就来解决这个问题: 首先呢,这个问题的起因,不是前端css的问题,也不是js的问题,而 ...

随机推荐

  1. MongoDB数据库索引

    前面的话 索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录.这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查 ...

  2. Memcache+cookie实现模拟session

    上一片讲到Memcached在Windows上的安装,和用Telnet工具进行命令操作,在稍微了解了原理之后,我也就开始尝试着用程序来对Memcached进行操作.这一篇分为两个部分,第一部分是用.n ...

  3. UglyNumber - 找“丑数”

    uglynumber的定义是只能被1,2,3,5整除的数 规定1是第一个uglynumber:以此类推,1 2 3 4 5 6 8 9 10 12 15 16 18 20 24 25 27 30 32 ...

  4. Out of mind - 魔术纸

    魔术纸 显示屏与纸张的完美结合.类似电子墨水.柔性显示器.魔术纸柔软似真正的纸张.用魔术纸做成的电子书,控制器在书轴处. 每一页能显示不同的东西.一本书可以完全按页显示在电子书上.可以换一本书来显示. ...

  5. luogu P2756 飞行员配对方案问题

    题目链接:P2756 飞行员配对方案问题 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另 ...

  6. html5 01 随记

    一  HTML 是一种制作网站的标记语言 二.HTML基本语法 HTML 标签 html标签是html中的最基本单位 也是最重要的部分 通常使用尖角号 开始"<"和结束&qu ...

  7. mongodb中limit与skip方法

    Mongodb Limit()方法 如果需要在mongodb中获取指定数量的数据记录,这时候就要用到limit()方法,该方法需要接收一个数字参数 基本语法:  DB.COLLECTION_NAME. ...

  8. Cinnamon桌面是怎么回事儿

    (linux mint 18.2 用户截图) Cinnamon的由来 在GNOME 3之前,GNOME是根据传统的桌面比拟(Desktop metaphor)而设计,到了GNOME 3便被GNOME ...

  9. mysql 5.7 root密码重置(centos 7)

    mysql5.7版本之后,与mariadb不同,在安装之后,在启动之时,会进行自动随机密码的设定,所以在systemctl start mysqld之后,会出现mysql -uroot -p无法登陆的 ...

  10. error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    一.情形描述 下载了一个VS的源码,不知道此源码的版本.使用VS2010编译时出现如下报错: error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 二.解决方法 在VS2010界 ...