Question

我目前正在尝试创建一些嵌套列表来显示以下内容......

一个... R ... X
乙内容S ... Y
ç...Ť... Z

（这些字母最终会被单词替换）并且在chrome和firefox中完美地完成了这项工作，但是当我使用Internet Explorer时，我得到的内容类似于以下内容......

一个
乙... [R
ç内容S ... X
......牛逼... Y
...........ž

我认为它可能与css有关，但请有人帮助我解决这个问题，html和css如下所示，提前感谢您的帮助。

HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="lists in IE.css" type="text/css">
</head>
<body>

<div id="container">

    <ul id="links-nav">
        <li>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">L</a></li>
                <li><a href="#">M</a></li>
                <li><a href="#">N</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">X</a></li>
                <li><a href="#">Y</a></li>
                <li><a href="#">Z</a></li>
            </ul>       
        </li>

    </ul>

    <div class="clear"></div>   
</div>

</body>

</html>

CSS

#container{
    width:940px; 
    margin:0px auto; 
    border: 1px solid #000;
    padding: 20px 10px; 
    height:auto; 
    font-family: Arial, sans-serif; 
    font-size:11px;
}

.clear {
    clear: both;
    height: 0;
    overflow: hidden;
}


a{
    text-decoration:none;
    color:#555;
}

#links-nav li, li ul li{
    list-style:none;
}

#links-nav{
    list-style-type: none;  
    margin:0px;
    padding:0px;
}

#links-nav li ul{
    float:left;
    width:168px;
    padding: 0px 10px;
    list-style-type: none;      
}

Answer 1

添加你的css

#links-nav > li {
    width:168px;
    float:left;
}

演示： http://jsfiddle.net/qUJuy/2/

或

#links-nav > li {
    width:168px;
    display:inline;
}

演示： http://jsfiddle.net/qUJuy/3/

以上将修复ie7中的错误（在ie8中它已经正确）。

嵌套列表的CSS

1 个答案: