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><a href="#">文本居中</a></li>
    <li><a href="#">文本居中</a></li>
    <li><a href="#">文本居中</a></li>
    </ul></div>

</body>

时间： 2024-10-09 18:17:35

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

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 横排 菜单

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

为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果 比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="

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

定义ul li的 list-style 的时候，list-style跟文字内容有距离

定义ul li的 list-style 的时候,list-style跟文字内容有距离,需要通过margin-left来显示正常,并且IE6.IE7的间距比谷歌浏览器大,所以给li定如下样式 ul li{list-style:decimal inside;}

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()">

ul li做横向导航栏例子

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /*

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r