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>
时间: 2024-08-08 01:25:30

ul li 水平居中的相关文章

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

head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top ul{text-align:center;list-style-type:none;}#top ul li{display:inline;list-style-type:none;}</style></head> <body>    <div id="top&

Ul li 竖排 菜单

1 Ul li 竖排 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

div+css(ul li)实现图片上文字下列表布局

css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; width:536px; overflow:hidden}使用margin:0 auto,让ul结构布局居中:使用overflow:hidden,因为ul的子级使用float属性会产生浮动,所以使用清除子级使用float对父级产生不能撑开问题:使用宽度width:536px;固定宽度让子级li准确一排只排

html ul li 显示数据库

方法1: function insert() { var str=""; var data="你的数据库数据"; str="<ul><li>"+data+"</ul></li>"; document.getElementById("test").innerHTML = str; } <body onload="insert()">

&lt;ul&gt;-&lt;li&gt;无序列表标签

概念:多个并列的列表项之间没有先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

用ul li做的menu怎么才能使整个li都是链接区域?

a 加上 display:block <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

CSS ul li a 背景图与文字对齐

<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif" /> <ul> <li><a href="#">方便的订单管理1</a></li> <li><a href="#">方便的订单管理2</a></li>

asp.net中Repeater中用ul li绑定数据

<ul class="tit1"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <p class="tit1-p-1"> <img style="border: 0px;" src="/image/biaozhi.jpg" /> &