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; ...
随机推荐
- Tomcat 优化相关知识
---------(Tomcat Listener)----------- Tomcat 性能的因素是内存泄露.Server标签中可以配置多个Listener,其中 JreMemoryLeakPrev ...
- [pixhawk笔记]3-架构概览
本文主要内容翻译自:https://dev.px4.io/en/concept/architecture.html 总体架构: PX4代码由两层组成:PX4飞行栈和PX4中间件.其中,前者是一套飞行控 ...
- Book Review of “The practice of programming” (Ⅳ)
The practice of programming Chapter 4 Interfaces A good programmer should always be good at designin ...
- OpenGL核心技术之Gamma校正
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你/2.2次幂.Gamma校正后的暗红色就会成为(0.5,0.0 ...
- 解决Vim插入模式下backspace按键无法删除字符的问题【转】
本文转载自:https://blog.csdn.net/zxy987872674/article/details/64124959 最近使用某个服务器编辑文件时,快捷键i进入插入模式后,下方不出现in ...
- 安装专业版的linux的方法 图解安装专业版的linux
按装一个linux系统其实很简单,不再像以前那样光光盘就好些个,一不小心还又可能装错,实在也是一个大问题.现在好了基本上都是简单安装+网络升级先安装主要的后面如果需要什么在装什么?大大简化了流程.不行 ...
- 深入理解JVM 垃圾收集器(上)
HotSpot虚拟机中的垃圾收集器 GC评价标准 GC调优 响应时间 吞吐量 1.新生代收集器 Serial收集器 ParNew收集器 Parallel Scavenge收集器 2.老年代收集器 Se ...
- Eclipse 启动tomcat 访问主页报错404
问题 tomcat用startup.sh启动,访问localhost:8080能正常访问,用Eclipse service启动tomcat,访问localhost:8080报错404 解决方法 1. ...
- ngnix进阶
ngnix进阶 nginx: [warn] duplicate MIME type "text/html" in /usr/local/nginx/conf/nginx.conf: ...
- Linux.Siggen.180
from: https://vms.drweb.com/virus/?i=15455134&lng=en Linux.Siggen.180 Added to Dr.Web virus data ...