横排列表(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的问题,而 ...
随机推荐
- 【WeX5学习】 后端服务之访问数据库表
WeX5是跨段移动开发框架,将H5的标签封装成组件,实现可视化.组件化快速开发.实现一次开发,多端(iOS.安卓和微信)运行.WeX5的IDE基于Eclipse,提供了一个完全可视化.组件化.拖拽式开 ...
- 华为OJ之最长公共子序列
题目描述: 对于两个给定的字符串,给出他们的最长公共子序列. 题目分析: 1,在之前的博文(http://www.cnblogs.com/yonguo123/p/6711360.html)中我们讨论了 ...
- 解决win10注册错误 错误代码0x8002801c
使用win10的过程中经常碰到各种注册错误,让人抓狂!!! 现在分享一个完美的解决方法(非原创): 最简洁的办法是:1.自行将msinet.ocx(win10系统64位)组件复制到C:\Windows ...
- 苹果APP发布
1 发布方式 苹果发布上架有两种方式,一种是上传到苹果商店,一种是挂在web服务器上扫描下载,下面分别介绍这两种发布方式 1.1 上传AppStore 1. 用公司账号或者个人开发账号生成上架.p12 ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- SQL Server系列之SQL Server 2016 中文企业版详细安装步骤(超多图)
1. 下载地址 下载地址 :https://www.microsoft.com/en-us/server-cloud/products/sql-server-2016/ 官方技术文档:https:// ...
- select可选择、同时可自行输入
HTML部分: <li class="bl-form-group"> <label>诊断医生</label> <div class=&qu ...
- [PS相关]DAS,NAS,SAN三种存储技术比较
随着数据量一直在快速增长,存储技术也在快速的更新以满足需求和推动创新.当存储被提到的时候,它不仅仅局限于存储容量,还有其他的需求比如数据保护,数据备份,数据访问速度等等. NAS-网络存储设备(Net ...
- DDD理论学习系列(13)-- 模块
DDD理论学习系列--案例及目录 1. 引言 Module,即模块,是指提供特定功能的相对独立的单元.提到模块,你肯定就会想到模块化设计思想,也就是功能的分解和组合.对于简单问题,可以直接构建单一模块 ...
- win10 vmware下Linux系统联网
本来,这个问题网上资源很多的,但是就因为多,就变得杂了,对于许多新手,并不理解为啥,故记录下来方便以后使用.此处我采用配置VWmare虚拟网关(上学期刚刚学计算机网络,正好可以复习下).关于虚拟机下L ...