我有一个列表，我希望主要元素垂直对齐，每个子元素都落在主要元素下方。我想保留 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/