無法將元素保留在父元素內

使用CSS，我如何將元素保留在其父元素內。我創建了一個DIV &將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; 
}

來源

2016-02-07 OpenStack

添加position: relative父DIV。絕對位置是相對於文檔的，除非在具有相對定位的元素內。

來源

2016-02-07 05:13:16

下面是新代碼： - 我將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>

來源

2016-02-07 05:22:04

無法將元素保留在父元素內

回答

相關問題