效果如下:

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. 怎么调试nodejs restful API 以及API的Authorization

    最近Nodejs,python越来越火了,同时也越来越多的人在用node写服务,可是怎么去调试服务呢?以及当你一个服务发布出去,怎么保证其安全性呢? 环境:linux unbuntu 语言:nodej ...

  2. 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序

    不得不吐槽一下,安装配置这eclipse真是太费劲了...下面总结一下,以便下次再安装 本人 win10系统,64位机 一.在官网下载eclipse安装包 文件名:eclipse-inst-win64 ...

  3. [bzoj1805][SCOI2005]骑士精神 [启发式搜索]

    Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...

  4. linux和Windows实现文件共享之samba的安装与配置

    背景: 项目需求linux的一个目录,需要在两台windows目录上面进行同时共享. 使用mount时发现,通过mount将同一个linux上面的目录挂载在两台windows机器上时,会出现文件隐藏的 ...

  5. 如何在Shell中快速切换目录

    1.回到上一次进入的路经cd -2.回到Homecd ~3.自动补齐实例,cd /usr/src/redhat,可以用cd /u[TAB]s[TAB]r[TAB]4.!$ 表示上一个命令的最后一个参数 ...

  6. TensorFlow conv2d原理及实践

    tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, data_format=None, name=None) 官方 ...

  7. (转)Windows7下命令行使用MySQL

    1 安装 我在Win7下安装的MySQL版本是mysql-5.0.22-win32 1.在Win7环境下安装MySQL,关于安装方法可以参考文章: Win7系统安装MySQL5.5.21图解教程.wi ...

  8. hibernate 使用枚举字段的最佳实践

    枚举类虽然很简单,但是却往往是系统中业务逻辑最集中最复杂的地方.本文将会分享我们项目中基于hibernate的枚举类使用规范,包含数据库中枚举列数据类型.注释.枚举列与枚举类的映射等. 一.枚举类定义 ...

  9. 一.CPU,Mem过高怎么办 --这是个开始

    本身是名Java开发,在做了一段大数据的工作后,猛然间想对Java做个总结. 从未写过技术博客,一时不知如何开始,思虑后,暂且以自己喜爱的方式来开篇. 工作中遇到过CPU或内存过高的问题,解决步骤: ...

  10. mysql导出指定字段或指定数据到文件中

    使用mysqldump把mysql数据库的数据导出到文件中还是挺方便的:比如说要导出baijunyao数据库: // mysqldump -u用户名 -p 数据库名 [表名]> 导出的文件名 m ...