得到div之外的东西

Question

嗯，我不确定如何用文字问这个，所以我会张贴一张图片：

所以在图像中，有一个主div，我们称之为“红色”。

在“红色”里面还有另一个名为“绿色”的div

在“绿色”里面有一个ul，有一些li元素，它们应该有一个下划线，但是下划线必须离开div，所以我遇到的问题是，将该行放在“绿色”之外，在代码中，它就在里面。

我猜测可能会有某种溢出设置或某种技术来实现这一点，也许它比我想象的容易得多，但我无法理解它。

总结起来，我需要从div中获取一些东西，并让它在外面展示。

我试图尽可能多地谷歌，但我找不到任何对我有用的东西，也许是因为我甚至不确定如何问。

Answer 1

这取决于具体情况。如果它是固定大小的元素，它们总是相同的大小，无论你做什么： 将red div定位为relative，然后将green div定位为absolute，将ul定位为绝对值。这将允许您移动元素。相对于红色div。 如果是拉伸元素取决于窗口的大小，它会更难，margin-left，margin-top和float:left可以做到这一点，但你应该非常小心，因为它很难制作跨浏览器。

Answer 2

你无法用溢出来解决这个问题。您需要做的是让绿色中的ul设置为position: absolute，将红色框设置为position: relative。

我为它做了jsfiddle（我的第一个）。

Answer 3

根据您的要求查看演示： - DEMO

<强> HTML

<div class="red">
<div class="green">
  <ul>
    <li>loreum</li>
    <li>loreum</li>
        <li>loreum</li>
    <li>loreum</li>
  </ul>
  </div>

</div>

<强> CSS

.red {
width:300px;
height:300px;
background:red;  
}

    .green {
        float: right;
        height: 200px;
        margin: 30px 30px 0;
        width: 200px;
    background:green;
    }

    .green ul {
        left: 8px;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 200px;
    }

    .green ul li {
    list-style-type:none;
    display:block;
    border-bottom:1px solid white;
      text-align:right;
    }

Answer 4

对于绿色div使用“overflow：hidden”（css）