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 水平居中的更多相关文章

  1. ul+li水平居中的几种方法

    一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. 让ul li水平居中(任意删除li也能水平居中)

    HTML代码: <div class="box"> <ul class="button-ct"> <li></li&g ...

  3. ul li内的文字水平居中显示

    head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...

  4. Ul li 横排 菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Ul li 竖排 菜单

    Ul li 竖排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  7. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  8. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  9. ul li 下的元素内容垂直居中

    CSS: <style> * {;; } li { list-style: none; } li span { border: 1px solid red; height: 100px; ...

随机推荐

  1. 【学习ffmpeg】打开视频文件,帧分析,并bmp保存关键帧

    http://www.tuicool.com/articles/jiUzua   http://blog.csdn.net/code_future/article/details/8646717 主题 ...

  2. Easy-RSA 3快速入门自述文件

    Easy-RSA 3快速入门自述文件 这是使用Easy-RSA版本3的快速入门指南.运行./easyrsa -h可以找到有关使用和特定命令的详细帮助.可以在doc /目录中找到其他文档. 如果您从Ea ...

  3. NOIP 合唱队形

    描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2,…, ...

  4. 使用本地JConsole监控远程JVM

    第一阶段 找到了2种配置,是否需要输入密码. 在 catalina.bat 文件新增如下脚本 第一种配置: rem HaoYang Set JAVA_OPTSset JAVA_OPTS=-Xms512 ...

  5. java实现定时任务的三种方法 - 转载

    java实现定时任务的三种方法 /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简 ...

  6. C语言中链接影响程序的细节

    参考:<深入理解计算机系统>  7.61节  链接器如何解析多重定义的全局符号 基本的原则是这样的:对于所有的全局符号,函数和已初始化的全局变量是强符号,未初始化的全局变量是弱符号. Un ...

  7. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  8. python学习笔记(session)

    昨天提到想加入cookies 测试登录后的接口 尝试了下 只要用 session方法即可 代码如下 #!/usr/bin/env python # -*- coding: utf_8 -*- impo ...

  9. spring3: 内置Resource实现

    4.2  内置Resource实现 4.2.1  ByteArrayResource ByteArrayResource代表byte[]数组资源,对于“getInputStream”操作将返回一个By ...

  10. python中多线程,多进程,队列笔记(一)

    threading简介:If you want your application to make better use of the computational resources of multi- ...