绝对定位元素会导致元素在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屋!