CSS для вложенных списков - PullRequest
Новая
       16

CSS для вложенных списков

1 голос
/ 29 сентября 2011

В настоящее время я пытаюсь создать несколько вложенных списков для отображения следующего ...

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

(где буквы в конечном итоге будут заменены словами) и сделали эту работу отлично в Chrome и Firefox, однако, когда я использую Internet Explorer, я получаю нечто похожее на следующее ...

A
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;      
}

1 Ответ

1 голос
/ 29 сентября 2011

добавить в свой 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 она уже была правильной).

...