如何将web中无序列表由横向变纵向

<HTML>
<HEAD>
<TITLE>无序列表</TITLE>
<style type="text/css">
#nav li{
list-style-type:none;
float: left;
}
a {
display: block;
width: 90px;
height: 30px;
background: #606 url(button1.gif) bottom left no-repeat;
color:#fff;
text-align:center;
text-decoration:none;
line-height:30px;
vertical-align:middle;
}
a:hover {
background: #f0f url(button1.gif) top left no-repeat;
color:#000;
}
</style>
</HEAD>
<BODY>
<ul id="nav">
<li id="info"><a href="http://www.ujn.edu.cn">Serif</a></li>
<li id="contact"><a href="http://www.ujn.edu.cn">Sans-serif</a></li>
</ul>
</BODY>
</HTML>
以上为源代码
现在显示界面为：serif sanserif
如何改为界面：serif
sanserif

举报该问题

其他回答

第1个回答 2012-12-26

弄了半天，终于改好了。

改动的核心配置：

#nav li{
list-style-type:none;
display: inline;
vertical-align:left;
}
a {
display: block;
width: 90px;
height: 30px;
background: #606 url(button1.gif) bottom left no-repeat;
color:#fff;
text-align:left;
text-decoration:none;
line-height:30px;
vertical-align:left;
}

主要是参考：
google搜
Simple horizontal list

即可找到该贴。本回答被网友采纳

第2个回答 2012-12-26

去掉 #nav li中的float:left;

仍有疑问追问吧追问

已发私信提问，谢谢

追答

已回复

本回答被提问者采纳

相似回答

...CS6中,怎么把无序列表中的文字竖排改成横排?在线等,谢谢答：用CSS控制ul li{ float:left;} 关注卫星(web_learn01),一起交流进步!

大家正在搜

无序列表横向排列有序列表和无序列表的嵌套 word表格横向变纵向无序列表横向 word横向变纵向 word文档横向变纵向怎么把纵向变成横向怎么把横向表格转成纵向无序列表居中