Question

我有一个列表，我希望垂直对齐的主要元素和每个元素的子元素下拉到主元素下面。我想保持位置：subNav类的绝对值，因为此导航的宽度会因各自而异，所以我无法设置宽度。这适用于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>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>

Answer 1

不要忘记输入你的左上角和左上角。

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而不是整个文档。

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

1 个答案: