嵌套列表的 CSS
我目前正在尝试创建一些嵌套列表来显示以下内容...
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如下所示，提前感谢您的帮助。
HTMLCSS
<!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>
#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;
}
I am currently trying to create some nested lists to display the following...
A...R...X
B...S...Y
C...T...Z
(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...
A
B...R
C...S...X
......T...Y
...........Z
I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在你的CSS中添加
演示： http://jsfiddle.net/qUJuy/2/< /a>
或
演示： http://jsfiddle.net/qUJuy/3/< /a>
以上将修复 ie7 中的错误（在 ie8 中已经正确）。
add in your css
Demo: http://jsfiddle.net/qUJuy/2/
or
Demo: http://jsfiddle.net/qUJuy/3/
The above will fix the error in ie7 (in ie8 it was already correct).