效果如下:

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. 如何快速轻松学习bootstrap

    我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云. 还是在后面不断使用的过程中慢慢体会到 ...

  2. 【NOI模拟】谈笑风生(主席树)

    题目描述 设 T 为一棵有根树,我们做如下的定义: 设 a 和 b 为 T 中的两个不同节点.如果 a 是 b 的祖先,那么称 “ a 比 b 不知道高明到哪里去了 ” . 设 a 和 b 为 T 中 ...

  3. Ansible 运维自动化 ( 配置管理工具 )

    背景 出差背景,要搞项目的自动化部署.因为只直接对接生产分发,机器又非常多,这样以往使用的bat只能作为应急方案了,还是得考虑使用专业化的工具来做这个事情! 当下有许多的运维自动化工具( 配置管理 ) ...

  4. vue2中component父子组件传递数据props的使用

    子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...

  5. Haproxy的配置

    1,下载Haproxy 下载Haproxy 1.6  2,安装haproxy uname -r cd /usr/local/src/haproxy-1.6.9/ make TARGET=linux31 ...

  6. (转)JAVA堆栈操作

    java.util.Queue用法(是util中的一个接口) 队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行 ...

  7. 唠一唠Linux系统入门的方法和经验

    相信大伙都听说过linux系统,然而对于这个系统,总使让新手感觉茫然,偌大的系统.下面是一段百度中的介绍: Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用 ...

  8. 【HTML】canvas学习小结

    1. 绘制基本图形 -----上下文---------------------------------------------------------- canvas.getContext('2d') ...

  9. HDU1124 Factorial

    Problem Description The most important part of a GSM network is so called Base Transceiver Station ( ...

  10. 基于三台主机部署phpwind

    PHPWind(简称:PW)的使命是让网站更具价值,让更多人从网络中享受便利,以提升生活品质. phpwind是一个基于PHP和MySQL的开源社区程序,是国内最受欢迎的通用型论坛程序之一.phpwi ...