list里套list的有关问题
日期：2014-05-17 浏览次数：20952 次
list里套list的问题
各位老大
我遇到了这个问题，请大家帮帮忙。不胜感激，下面是我的html和css代码
HTML
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="components">
<ul>
<li>
<span class="category">People</span>
<ul>
<li><a href="#">Andy</a></li>
<li><a href="#">Edison</a></li>
<li><a href="#">Elaine</a></li>
<li><a href="#">Lei</a></li>
<li><a href="#">Tom</a></li>
<li><a href="#">Lily</a></li>
</ul>
</li>
<li>
<span class="category">Animal</span>
<ul>
<li><a href="#">Dog</a></li>
<li><a href="#">Lions</a></li>
<li><a href="#">Cat</a></li>
<li><a href="#">Tiger</a></li>
<li><a href="#">Birds</a></li>
<li><a href="#">Bear</a></li>
</ul>
</li>
<li>
<span class="category">AutoMobil</span>
<ul>
<li><a href="#">Bens</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Lexus</a></li>
<li><a href="#">Toyota</a></li>
</ul>
</li>
<li>
<span class="category">Sports</span>
<ul>
<li><a href="#">Soccer</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Racing</a></li>
<li><a href="#">Boxing</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
.category
{
font-size: 1em;
font-weight: bold;
}
#components ul li a
{
text-decoration: none;
color: 007bc9;
}
#components ul
{
list-style-type: none;
display: inline;
}
现在显示的结果是都是竖着排列的，我是想让每一类排成一行，然后类里面的数据是竖着排列的，怎么实现呢？
本来想把＃components ul li: display: line;
但是这么一些，所有的li， 包括li里面的li都横过来了，搞了我半天了，头大啊
补充一下，所有的ul, li都不能加id或者class name，因为那些是自己生成的，我不能加东西或者改东西，只能改style
我在线跪等啊
谢谢了
------解决方案--------------------
这样写是否可以？
各位老大
我遇到了这个问题，请大家帮帮忙。不胜感激，下面是我的html和css代码
HTML
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="components">
<ul>
<li>
<span class="category">People</span>
<ul>
<li><a href="#">Andy</a></li>
<li><a href="#">Edison</a></li>
<li><a href="#">Elaine</a></li>
<li><a href="#">Lei</a></li>
<li><a href="#">Tom</a></li>
<li><a href="#">Lily</a></li>
</ul>
</li>
<li>
<span class="category">Animal</span>
<ul>
<li><a href="#">Dog</a></li>
<li><a href="#">Lions</a></li>
<li><a href="#">Cat</a></li>
<li><a href="#">Tiger</a></li>
<li><a href="#">Birds</a></li>
<li><a href="#">Bear</a></li>
</ul>
</li>
<li>
<span class="category">AutoMobil</span>
<ul>
<li><a href="#">Bens</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Lexus</a></li>
<li><a href="#">Toyota</a></li>
</ul>
</li>
<li>
<span class="category">Sports</span>
<ul>
<li><a href="#">Soccer</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Racing</a></li>
<li><a href="#">Boxing</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
.category
{
font-size: 1em;
font-weight: bold;
}
#components ul li a
{
text-decoration: none;
color: 007bc9;
}
#components ul
{
list-style-type: none;
display: inline;
}
现在显示的结果是都是竖着排列的，我是想让每一类排成一行，然后类里面的数据是竖着排列的，怎么实现呢？
本来想把＃components ul li: display: line;
但是这么一些，所有的li， 包括li里面的li都横过来了，搞了我半天了，头大啊
补充一下，所有的ul, li都不能加id或者class name，因为那些是自己生成的，我不能加东西或者改东西，只能改style
我在线跪等啊
谢谢了
------解决方案--------------------
这样写是否可以？
- HTML code
<!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-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.list{
width:120px;
float:left;
}
.list h3 {
font-we
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
