gpt4 book ai didi

html - 绝对定位元素导致元素在IE中内联显示

转载 作者:行者123 更新时间:2023-11-27 22:38:58 25 4
gpt4 key购买 nike

我有一个列表,我希望主要元素垂直对齐,每个子元素都落在主要元素下方。我想保留 position: absolute 在 subNav 类上,因为这个导航的宽度会因每个导航而异,所以我无法设置宽度。这在 Firefox 中有效,但在 IE 7 中,绝对值导致子导航显示内联(因此从我想要的位置向右和向上移动)。我该如何解决这个问题?

例子:

<style>
#nav ul, #nav li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
float: left;
width: 120px;
border-right: 1px solid #000;
padding: 10px;
}
#nav li ul li {
float: none;
width: auto;
height: auto;
border-right: none;
text-align: left;
padding: 0;
}

#nav .subNav {
background: #eee;
position: absolute;
padding: 10px;
}
</style>
</head>

<body>
<div id="nav">
<ul>
<li>Main One
<ul class="subNav">
<li>Sub One A</li>
<li>Sub One B</li>
</ul>
</li>
<li>Main Two
<ul class="subNav">
<li>Sub Two A</li>
<li>Sub Two B</li>
</ul>
</li>
</ul>
</div>
</body>

最佳答案

不要忘记输入您的 top 和 left 值。

nav .subNav{
top:10px;
left:20px;
}

nav.containerDiv {
position:relative;
}

HTML

<ul class="nav">
<li>
<div class="containerDiv">
<ul class="subNav">...
</div>
</li>
</ul>

这将导致子导航相对于容器 div,而不是整个文档。

关于html - 绝对定位元素导致元素在IE中内联显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1289842/

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