gpt4 book ai didi

html - 嵌套列表的 CSS

转载 作者:行者123 更新时间:2023-11-28 18:56:47 25 4
gpt4 key购买 nike

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

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

最佳答案

添加你的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 中它已经正确)。

关于html - 嵌套列表的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7594605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com