用无序列表做横向导航（无序列表制作横向导航）
如何应用ul、li标签创建css横向导航菜单？
xhtml代码首先定义了一个容器div id="nav"。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul id="nav"就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，假如我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。 #nav定义了窗口的宽高及背景颜色。#nav ul包含有margin和padding声明，字体及颜色声明。line-height: 30px;是非常重要的定义，假如取消掉行高的定义，我们的链接文字垂直居中就可能受到影响。white-space: nowrap;或许大家并不能理解有什么作用，它定义了强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 #nav li中的list-style-type: none;去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display: inline;声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的要害。 #nav li a和#nav li a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding: 7px 10px;它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。
CSS的相关问题 用无序列表做css横向导航
如何实现a元素的垂直居中？
2个办法。
第一个设置a元素的上下内边距一样。你的CSS仅设置了 padding-top:20px;是不行的。
第二个是设置a元素的行高，line-height，把行高设置为需要垂直居中对齐的元素的高度，但是垂直居中的内容不能换行。
会HTML的都进来看看!
style type="text/css"
!--
li {
display: inline;/*让列表在一行内*/
list-style-type: none;
/*去掉了“方块或实心的黑点”,改其它的图标改这里值
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
*/
padding: 5px 10px;/*边距,上下5px,左右10px*/
}
--
/style
ol
li111/li
li222/li
li333/li
li444/li
/ol
li和span哪个做横向导航好？
当然是li
不用是因为span的意思是代表字符，li的意思是列表项。li的意思与导航的意思大致上是一样的。这样有助于Seo。而且在导航方面明显li比span要方便。真不明白你为什么说span方便。也许
你不了解
li的真正用法吧~
什么叫无序列表实现横向菜单
打开附件:357.rar,index_6.htm和index_7.htm分别是两个题目的效果 代码如下： [index_6.htm--list] html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title菜鹰相册/title style .bg{width:380px;height:320px;background:#FFF url('userpic.gif') no-repeat center;} /style /head body div align="center" table border="0" width="100%" id="table1" style="width:760px" cellspacing="0" cellpadding="0" tr td class="a1ad-3f9c-b7c9-c9d2 bg" align="center"img src="1.jpg"/td td class="3f9c-b7c9-c9d2-489b bg" align="center"img src="2.jpg"/td /tr tr td class="b7c9-c9d2-489b-442f bg" align="center"img src="3.jpg"/td td class="c9d2-489b-442f-a2eb bg" align="center"img src="4.jpg"/td /tr /table /div /body /html [index_7.htm--list] html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title菜鹰菜单/title style type="text/css" #menulist {//*设定div的Box属性*// border: 1px solid #000; margin: 10px; width: 560px; padding: 5px; } #menulist ul, #menulist li {//*设定限制于horizonlist的div内的ul和li的属性*// display: inline; margin: 0; padding: 0; } .menu a:active, .menu a:visited, .menu a:link { display: inline; margin: 0; padding: 5; height:20px;width:80px; font-size:9pt; color: #696969; background-color:#efefef; text-decoration: none; } .menu a:hover { color: #ffffff; background-color: red; font-weight: bold; text-decoration: none; } /style /head body div id="menulist" align="center" ul class="489b-442f-a2eb-e68a menu" lia href="#"首页/a/li lia href="#"产品介绍/a/li lia href="#"服务介绍/a/li lia href="#"技术支持/a/li lia href="#"立即购买/a/li lia href="#"联系我们/a/li /ul /div /body /html 附件： 357.rar
在DIV+CSS中，让无序列表横向显示，是用float:left;还是用display: inline
用float:left,如果无序列表有外边距，即有maring值，则
float：left和display:
inline同时用，不然浏览器兼容性会出问题，IE6外边距会加倍。
单独使用display:
inline虽然可以横向显示，但无序列表的宽度和高度值将不起作用了，即如果li设置值将不起作用，因为display:
inline是行内样式。
请用无序列表ul 写一个简单的横向导航
!--样式-- style type="text/css"
.nav li{ float:left; width:100px; list-style-type:none;}
.nav li a{ color:#333;}
.nav li a:hover{ color:#f00; text-decoration:underline; }
/style!--html代码-- ul class="442f-a2eb-e68a-8edf nav"
lia href="#"导航链接1/a/li
lia href="#"导航链接2/a/li
lia href="#"导航链接3/a/li
/ul
