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

<HTML><HEAD><TITLE>无序列表</TITLE><styletype="text/css">#navli{list-style-type:none;floa... <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 展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

againinput4
2012-12-26 · TA获得超过2407个赞

知道大有可为答主

回答量：1446

采纳率：70%

帮助的人：640万

我也去答题访问个人页

关注

展开全部

弄了半天，终于改好了。

改动的核心配置：

#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 

即可找到该贴。


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起