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; ...
随机推荐
- Web前端学习笔记之BootStrap
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- jQuery可自动播放动画的焦点图
在线演示 本地下载
- SpringBoot Lombok
简介 lombok是一个编译级别的插件,它可以在项目编译的时候生成一些代码.比如日常开发过程中需要生产大量的JavaBean文件,每个JavaBean都需要提供大量的get和set方法,如果字段较多且 ...
- springBean参数注入的几个方法
1.普通方式注入 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- .NET中如何测试Private和Protected方法
TDD是1)写测试2)写通过这些测试的代码,3)然后重构的实践.在,NET社区中, 这个概念逐渐变得非常流行,这归功于它所增加的质量保证.此时,它很容易测试public方法,但是一个普遍的问题出现了, ...
- DevExpress 给TreeList添加右键菜单
只有在右击节点时才会触发 private void treeList1_MouseDown(object sender, MouseEventArgs e) { if (e.Button == Mou ...
- 摘录:MINA 框架简介
Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP.UDP/IP协议栈的通信框架(然,也可以提供JAVA 对象的序列化服务.虚拟机管道通信服务等),Mi ...
- java-登陆界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- phpexcel: 数据导出
// 设置列名最多40个 $cols = array( "A", "B", "C", "D", "E" ...
- WPF布局控件常用属性介绍
WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows ...