嵌套列表的CSS

Question

我目前正在嘗試創建一些嵌套列表以顯示以下內容...

A ... R ... X
B ... S ... Y
C ... T ... Z

（字母最終將被單詞替換），並使其在chrome和firefox中可以完美地工作，但是當我使用Internet Explorer時，會得到類似於以下內容的信息...

一種
B ... R
C ... S ... X
...... T ... Y
........... Z

我認為這可能與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 個解決方案

解決方案1
1 已采納 2011-09-29 08:47:52

嵌套列表的CSS

問題描述

1 個解決方案

解決方案1 1 已采納 2011-09-29 08:47:52

解決方案1
1 已采納 2011-09-29 08:47:52