Question

使用CSS，如何将元素保留在其父元素中。我创造了一个DIV＆amp;在其中放置了一个HR标签以及两个组合框。

HR标签在DIV之外。请检查fiddle。

<div style="width:70%; border:solid">
  <hr style="position:absolute;width:100%;z-index:-1;" /> Option One
  <select style="margin-right:50px">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>

  </select>
  <span></span> Option Two
  <select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>

  </select>
</div>

风格：

h2 {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #fff;
  padding: 0 10px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top-color: #ccc;
  border-top: 1px solid #eee;
}

Answer 1

将position: relative添加到父div。绝对位置是相对于文档的，除非在具有相对定位的元素内。

Answer 2

这是新代码： - 我将position:relative添加到容器中，这意味着包含所有绝对定位的子项。

<div style="width:70%; border:solid;position:relative">
  <hr style="position:absolute;width:100%;z-index:-1;" /> Option One
  <select style="margin-right:50px">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span></span> Option Two
  <select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

无法将元素保留在父元素中

2 个答案: