Question

我有一个嵌套结构，其中div包含ul，而ul又包含div。我的要求是让大多数内部div的内容显示超出ul或外部div的宽度（边界）。

＆＃13;

    /* Positioning */
    #box1 {
      position: absolute;
      overflow: hidden
    }
    #box2 {
      position: relative
    }
    #box3 {
      position: absolute;
      top: 10px
    }
    /* Styling */
    #box1 {
      background: red;
      padding: 5px;
      width: 125px
    }
    #box2 {
      background: blue;
      padding: 2px;
      width: 125px;
      height: 100px
    }
    #box3 {
      background: green;
      padding: 2px;
      width: 500px;
      height: 150px
    }

＆＃13;

<div id="box1">
  <ul id="box2">
    <li>
      <div id="box3" />
    </li>
  </ul>
</div>

＆＃13;

参考https://jsfiddle.net/ob641d3s/

注意：这适用于Chrome 47但是它在Mac上从Chrome 49开始停止工作。这仍然适用于Chrome + Windows

Answer 1

删除overflow: hidden上的#box1属性并且它很好:)

Fiddle

Answer 2

感谢大家回复，

我能够找到一个非常清楚地解释解决方案的页面，并按照以下页面中描述的步骤解决了我的问题

https://css-tricks.com/popping-hidden-overflow/

UL中的Child Div中断

2 个答案: