横排列表(li)的左右对齐
效果如下:

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)的左右对齐的更多相关文章
- 无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
- CSS实现列表li边框重合问题
CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和 ...
- ul列表li元素横排显示的IE兼容性问题
目标: 使ul列表横排显示 现象: 谷歌OK,火狐竖排,IE竖排. 原因: ul原css代码: 首先,去除点号,list-style:none;为了使其横排,使用了display:contents;该 ...
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
- CSS图片两端对齐,自适应列表布局末行对齐修复实例页面
写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...
- Html 列表 li ul使用
html中偶尔会使用到列表,记录一下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- ul li排版 左右对齐
定义两个ul的class, 一个向左浮动, 一个向右浮动 #navtop{ width:100%; height:46px; background-color:#ecf0 ...
- js 点击列表li,获得当前li的id
html <ul id="demo"> <li id="li-1">li1</li> <li id="li- ...
- 【8.0、9.0c】树形列表 列标题 不对齐的问题及解决方案
树形视图状态经常会碰到字体上下排列不整齐的问题,虽不是什么大问题,但对某些处女座的人来说,真的是如鲠在喉,今天我们就来解决这个问题: 首先呢,这个问题的起因,不是前端css的问题,也不是js的问题,而 ...
随机推荐
- 小哈学Python第二课:Hello Word
Python入门 1.Hello World 2.Hello World
- Android-重新包装Toast,自定义背景
Android-重新包装Toast,自定义背景 2016-4-27 Android L 算是包装了一个自己使用的小工具. 使用Toast的目的是弹一个提示框.先看一下Toast.makeText方法. ...
- 学习笔记TF030:实现AlexNet
ILSVRC(ImageNet Large Scale Visual Recognition Challenge)分类比赛.AlexNet 2012年冠军(top-5错误率16.4%,额外数据15.3 ...
- Angular02 将数据添加到组件中
准备:已经搭建好angular-cli环境.知道如何创建组件 一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...
- python 一个包中的文件调用另外一个包文件 实例
python不同文件夹中模块的引用调用顺序,被调用的模块中①有类的 模块.类().方法() ②无类的:模块.方法() test包中testIm.py 调用 test1包中testIm1.py中的方 ...
- 双向循环链表(C语言描述)(三)
代码清单 // linkedlist.h #ifndef __LINKEDLIST_H__ #define __LINKEDLIST_H__ #include <assert.h> #in ...
- c++ STL 容器——联合容器
STL提供了四种联合容器 set,multiset,map,multimap; set and multiset在<set>头文件 map and multimap在<map> ...
- Http跨域时的Option请求
写这篇文章时,我们碰到的一个场景是:要给R系统做一个扩展小应用,前端的html.js放在R系统里,后端需要做一个单独的站点N.B.com.这就导致了跨域问题,而且要命的是,后端同学没有权限向招聘的系统 ...
- gitbook初体验
前言 在早些天看sec-wiki的时候,看到有同学做了一个ctf-wiki来介绍CTF,让CTF新手能够快速入门,做成了电子书的样子,放在github上面.页面精美.简洁,让人爱不惜手. 想着自己也能 ...
- Android Studio 或 IntelliJ IDEA获取数字签名的方法
原先在 Eclipse中 数字签名(SHA1或MD5)的获取方法 为: 点击 Eclipse导航栏的Windows --> Preference --> Android --> Bu ...