ul li 水平居中
li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。
让LI水平居中代码共享CSS如下:
#linknav{height:140px;}
#linknav ul{text-align:center;list-style-type:none;}
#linknav ul li{display:inline;list-style-type:none;}
DIV结构代码如下:
<div id="linknav">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">域名注册</a></li>
<li><a href="#">虚拟主机</a></li>
<li><a href="#">企业邮局</a></li>
<li><a href="#">网站优化</a></li>
<li><a href="#">网站推广</a></li>
</ul>
</div>
ul li 水平居中的更多相关文章
- ul+li水平居中的几种方法
一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 让ul li水平居中(任意删除li也能水平居中)
HTML代码: <div class="box"> <ul class="button-ct"> <li></li&g ...
- ul li内的文字水平居中显示
head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...
- Ul li 横排 菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ul li 竖排 菜单
Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- html ul li的学习
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...
- ul li 下的元素内容垂直居中
CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...
随机推荐
- 20145201 《Java程序设计》第三周学习总结
20145201 <Java程序设计>第三周学习总结 教材学习内容总结 本周学习了课本第四.五章内容,即认识对象和对象封装. 第四章 认识对象 4.1类与对象 定义类 要产生对象必须先定义 ...
- tinyxml优化之二
原文链接:http://www.cnblogs.com/zouzf/p/4216046.html tinyxml优化之一说到了效率在差别有三方面的原因:解析的方式.内存分配(字符串操作).冗余的安全性 ...
- 周立功CAN-II引脚图
注意:如果需要两个CAN通道通信,直接用杜邦线将L连L,H连H,地连地就行(3.6引脚已做短接处理),不需要反接
- SQLite教程
SQLite教程 http://www.runoob.com/sqlite/sqlite-date-time.html SQLite管理工具http://www.sqliteexpert.com/do ...
- MySql判断汉字、日期、数字的具体函数
几个平常用的mysql函数,MySql判断汉字.日期.数字的具体函数分享给大家,具体内容如下 1.判断字符串是否为汉字 返回值:1-汉字 0-非汉字 ? 1 2 3 4 5 6 7 8 9 10 11 ...
- scala学习手记4 - Java基本类型对应的scala类
在Java中变量类型分为两大类:基本类型和引用类型.虽然在JDK1.5以后引入了自动装箱和自动拆箱机制,大大减少了我们在直接类型和引用类型之间的纠结,但仍有一些我们不得不考虑的问题.比如我在工作遇到的 ...
- linux中的kill命令
一. 定义 kill命令用来删除执行中的程序或工作.kill可将指定的信息送至程序.预设的信息为SIGTERM(15),可将指定程序终止.若仍无法终止该程序,可使用SIGKILL(9)信息尝试强制删除 ...
- Apache Samza流处理框架介绍——kafka+LevelDB的Key/Value数据库来存储历史消息+?
转自:http://www.infoq.com/cn/news/2015/02/apache-samza-top-project Apache Samza是一个开源.分布式的流处理框架,它使用开源分布 ...
- day4-不同目录间模块的调用
1.前言 上文已经讲述了软件项目开发目录规范的若干事项,现在问题来了,我们遵循了项目目录设计规范,不同目录下设计了不同的函数和模块,怎么实现对这些模块的调用,使其为项目整体所用呢?本章节讲述的绝对路径 ...
- <img>边框的border属性
默认地,图像是没有边框的(除非图像在 a 元素内部). 浏览器通常会把代表超链接的图像(例如包含在 <a> 标签中的图像)显示在两个像素宽的边框里面,以表示读者可以通过选择这个图像来访问相 ...