Question

我正在开展一个项目，该网站具有灵活的价值以适应任何分辨率。问题是在我的一个div中有一个下拉菜单，但它没有显示正确（被截止），因为父div有一个溢出自动它切断了div之外的部分。

div需要溢出自动，因为它有边框和填充

基本代码

div.box{
    border:1px solid #ccc;
    overflow:auto;
    padding:10px;
}
.dd-btn{
    width:22px;
    height:22px;
    float:left;
    position:relative;
}
.dd-btn ul{
    list-style:none;
    width:100px;
    height:200px;
    position:absolute;
    top:22px;
    right:0;
    z-index:100;
    background:#000 
}
.dd-btn ul li{
    width:100px;
    float:left; 
}


<div class="box">
   <ul>
       <li>link</li>
       <li>link</li>
       <li>link</li>
   </ul>
</div>

由于整个场地的结构，这个div可以有一个浮动或宽度：100％或一个高度。内容和分辨率将发生变化。

这个问题有一个简单的技巧吗？

找到解决方案：

.box:after{
    clear:both;
    content:" ";
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden;
    width:0;
}

使用此我可以摆脱溢出自动，框将显示正确

Answer 1

.menu_list {
  ...
  overflow: visible;
}

请参阅http://www.w3schools.com/cssref/pr_pos_overflow.asp

下拉列表显示不正确（父div有溢出自动）

1 个答案: