绝对定位元素会导致元素在IE中内嵌显示 [英] Absolute positioning an element causes element to display inline in IE
问题描述
我有一个列表，我想要主要元素垂直对齐，每个的子元素下拉到主元素下面。我想保持位置：绝对的subNav类，因为这个nav的宽度将不同，因此我不能设置宽度。这在Firefox中工作，但在IE 7绝对导致subnav显示内联（所以转移到右边，从我想要的位置）。如何解决此问题？
示例：
< 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>主要
< ul class =subNav>
< li>子一个A< / li>
< li>子一个B< / li>
< / ul>
< / li>
< li> Main Two
< ul class =subNav>
< li>子二A< / li>
< li>子二B< / li>
< / ul>
< / li>
< / ul>
< / div>
< / body>
不要忘记将
nav .subNav {
top：10px;
left：20px;
}
nav.containerDiv {
position：relative;
}
HTML
< ul class =nav>
< li>
< div class =containerDiv>
< ul class =subNav> ...
< / div>
< / li>
< / ul>
这将导致subNav相对于容器div而不是整个文档。 p>
I have a list that I'd like the main elements to align vertically and the sub elements of each to drop down underneath the main element. I want to keep the position: absolute on the subNav class because the width of this nav will vary from each so I can't set a width. This works in Firefox, but in IE 7 the absolute causes the subnav to display inline (so shifted to the right and up from where I would like). How can I fix this?
Example:
<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>
Don't forget to put in your top and left values.
nav .subNav{
top:10px;
left:20px;
}
nav.containerDiv {
position:relative;
}
HTML
<ul class="nav">
<li>
<div class="containerDiv">
<ul class="subNav">...
</div>
</li>
</ul>
This will result in the subNav being relative to the container div, instead of the whole document.
这篇关于绝对定位元素会导致元素在IE中内嵌显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
