ul li 元素超過 DIV 高度

Question

我有一個固定高度的 div，它有 Ul、li 元素，所以如果 ul/li 元素的內容超過 div 高度，它應該對齊到右側並且不會溢出到 div 之外。 我已經嘗試了一切但無法實現，下面是我的代碼：

 div { max-height: 200px; background: red; }

 <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div>

Answer 1

如果你想放置一行 li 元素。 你可以給 div display: flex功能。 如果 lis 的高度超過了 div 的高度，可以使用overflow-y: auto 。 這會將滾動條放到父 div

 .parent { max-height: 200px; background: red; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 20px; }

 <div class="parent"> <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsD</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>

Answer 2

首先，我強烈建議將每個<ul>及其關聯的<h3>包裝到一個容器中，這樣您就可以更好地控制布局。 在您使用的任何布局中，它都會分別直接影響<ul>和<h3>元素。 通過將兩個關聯元素包裝到單獨的容器中，布局屬性僅影響這些容器。

解決這個問題的一種方法是使用flex-wrap 。 通過應用flex-direction: column ，flex-flow 將嘗試將元素放在單個列中，如果不能，它們將換行到新列中。

 /* Simple reset */ * { margin: 0; box-sizing: border-box; } .wrapper { max-height: 200px; background: red; display: flex; flex-direction: column; flex-wrap: wrap; }

 <div class="wrapper"> <div class="container"> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsD</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>

Answer 3

 .item-list { display: flex; flex-direction: column; flex-wrap: wrap; height: 100px; overflow-y: scroll; background: red; }

 <div class="item-list"> <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>