子div重疊，不尊重父div寬

我正在構建一個Web應用程序的原型，我有div重疊的問題。子div重疊，不尊重父div寬

我有一個名爲#menu的div，其中有width: 15%;，裏面有一個名爲#list的子div，其中width: 100%;。

乍一看，似乎孩子格不尊重父 div的限制，請記住，孩子 div有position: absolute;。

還有一些關於這個問題的問題，但我沒有發現任何適合我的情況的問題。其中一些問題是關於在所有div上應用clear: both或應用display: inline-block;，但沒有任何工作。

任何幫助將不勝感激。

<html> 

    <head> 

    <title> PROTOTYPE - opcion.html</title> 

    <style type="text/css"> 

     body { 
     margin: 0; 
     } 

     #menu { 
     display: block; 
     height: 100%; 
     width: 15%; 
     background-color:#ff0000; 
     } 

     #list { 
     width: 100%; 
     top: 180px; 
     position: absolute; 
     } 

     ul { 
     background-color: aqua; 
     display: block; 
     padding: 0; 
     list-style: none; 
     } 

     li { 
     margin: auto; 
     width: 100%; 
     padding: 10px 0px 10px 10px; 
     border-bottom: 1px solid rgba(0,0,0,.6); 
     } 

     li a { 
     color: #ffffff; 
     font-size: 25px; 
     font-family: "Trebuchet MS", Helvetica, sans-serif; 
     text-decoration: none; 
     } 

    </style> 

    </head> 

    <body> 

    <div id="menu"> 
     <div id="list"> 
     <ul> 
      <li> <a href="#">Customers</a> </li> 
      <li> <a href="#">Students</a> </li> 
      <li> <a href="#">Teachers</a> </li> 
      <li> <a href="#">Android App</a> </li> 
     </ul> 
     </div> 
    </div> 

    </body> 

</html>

來源

2017-06-28 ivanleoncz

只需添加位置：相對於#menu。你的絕對容器將尊重父母的具有相對位置的屬性。只有在浮動元素時才需要「清除」。 – karthick

謝謝！你能否把它寫成答案，以便我能夠接受你的推薦？ – ivanleoncz

確定謝謝。我也添加了一些參考鏈接，這將是有用的 – karthick

只需添加位置：相對於#menu。你的絕對容器將尊重父母的具有相對位置的屬性。

「清除」要求，只有當你漂浮的元素。

來源

2017-06-28 21:25:50 karthick

好的標題。父div需要有一個相對位置，以便將絕對定位元素包含在其中。此代碼添加到您的風格：

#menu { 
position: relative; 
}

來源

2017-06-28 21:21:33

使用本：

<html>

<title> PROTOTYPE - opcion.html</title> 

<style type="text/css"> 
    body { 
     margin: 0; 
    } 

    #menu { 
     display: block; 
     height: 100%; 
     width: 15%; 
     background-color: #ff0000; 
    } 

    #list { 
     width: inherit; 
     top: 180px; 
     position: absolute; 
    } 

    ul { 
     background-color: aqua; 
     display: block; 
     padding: 0; 
     list-style: none; 
    } 

    li { 
     margin: auto; 
     width: inherit; 
     padding: 10px 0px 10px 10px; 
     border-bottom: 1px solid rgba(0,0,0,.6); 
    } 

     li a { 
      color: #ffffff; 
      font-size: 25px; 
      font-family: "Trebuchet MS", Helvetica, sans-serif; 
      text-decoration: none; 
     } 
</style>

<div id="menu"> 
    <div id="list"> 
     <ul> 
      <li> <a href="#">Customers</a> </li> 
      <li> <a href="#">Students</a> </li> 
      <li> <a href="#">Teachers</a> </li> 
      <li> <a href="#">Android App</a> </li> 
     </ul> 
    </div> 
</div>

列表CSS和李CSS使用：

width: inherit;

來源

2017-06-28 21:25:10 Mtu

子div重疊，不尊重父div寬

回答

相關問題