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. MySQL Binlog解析(2)

    一.TABLE_MAP_EVENT Used for row-based binary logging beginning with MySQL 5.1.5.The TABLE_MAP_EVENT d ...

  2. 微软名人数据集 ms_celeb_1m 处理(MsCelebV1-Faces-Aligned.tsv)python脚本

    本文主要介绍了如何对MsCelebV1-Faces-Aligned.tsv文件进行提取 原创by南山南北秋悲 欢迎引用!请注明原地址 http://www.cnblogs.com/hwd9654/p/ ...

  3. c#中的控件01

    1.常用控件: 只读文本:TextBlock.文本框:TextBox.按钮:Button 事件:鼠标移到按钮上的时候显示“大爷您来了”,离开 显示“大爷常来”,Click(点击).Loaded(控件加 ...

  4. 实验一 Linux初步认识

    遇到的困难和心得体会: 1.在操作过程中,有道作业是建立一个opt/forloutest的文件,而我建立了一个 OPT文件,cd OPT,却显示not a directory,通过阅读<linu ...

  5. 2018-2019-2 20165114《网络对抗技术》Exp1 逆向与Bof基础

    逆向及Bof基础实践 目录 一.实践目标 二.实验操作和步骤 1.直接修改程序机器指令 2.通过构造输入参数,造成BOF攻击. 3.注入Shellcode并执行 三.实验总结 四.实验遇到的错误和问题 ...

  6. bootstrap-datepicker 时间范围选择函数封装

    bootstrap-datepicker 时间范围选择函数封装 官网 https://bootstrap-datepicker.readthedocs.io/en/latest/index.html ...

  7. 四十二 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作

    注意:前面讲到的各种操作都是一次http请求操作一条数据,如果想要操作多条数据就会产生多次请求,所以就有了mget和bulk批量操作,mget和bulk批量操作是一次请求可以操作多条数据 1.mget ...

  8. git rm -r --cached 去掉已经托管在git上的文件

    1.gitignore文件 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则例如: # 此为注释 – 将被 ...

  9. uva 11825 巧妙地子集枚举方法

    https://vjudge.net/problem/UVA-11825 题目大意,有n台服务器,有n种服务,每台服务器都运行着所有的服务,一台服务器可以被攻击一次其中的一种服务,当你选择攻击某台服务 ...

  10. 【spark】IDEA建立基于scala语言的spark项目

    1.新建一个Spark项目 2.选择maven,用模板创建项目 如果 没有这个模板,我们需要添加一个 我们这里使用的是1.6版本Archetype Group Id : net.alchim31.ma ...