在它的底部放置一個列表，其中包含元素

我試圖在其底部使用<div>並使用position:absolute來定位<ul>我不太確定我缺少什麼，但是列表沒有出現，並且當我檢查元素看起來像它在包含元素的頂部。在它的底部放置一個列表，其中包含元素

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #BFBFBF 
 
} 
 

 
.list-container { 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Heading</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2014-09-21 Mdd

的.LIST容器沒有，因爲它不包含任何元素的高度（但對於絕對定位的UL）和它的定位在.container的頂部。絕對定位的ul有一個底部：0使標題文本出現在.container – ckuijjer 2014-09-21 14:12:25

@ckuijjer之上我想我現在就明白了。 list-container div包含ul，但是ul絕對定位並且不在文檔流中。這就是爲什麼.list-container div需要一個高度。 – Mdd 2014-09-21 14:24:08

這正是問題所在！我想你可能會想到將.container和.list容器相結合 – ckuijjer 2014-09-21 14:32:52

您需要的高度設置列表容器，而不是容器。

.container { 
 
    width: 200px; 
 
    background-color: #BFBFBF; 
 
} 
 

 
.list-container { 
 
    background-color: grey; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Heading</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2014-09-21 14:06:37

謝謝！我不確定身高，我想我認爲在父div上應用它會很好。 – Mdd 2014-09-21 14:18:50

你沒有設定包含組的長度。

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #BFBFBF 
 
} 
 

 
.list-container { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="list-container"> 
 
     <ul> 
 
      <li> 
 
       <h2>Hello</h2> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2014-09-21 14:07:09 afzalex

謝謝！我沒有意識到它必須位於.list-container div而不是父級。 – Mdd 2014-09-21 14:19:37

在它的底部放置一個列表，其中包含元素

回答

相關問題