我正在嘗試使用 CSS 列構建一個帶有無序列表的簡單布局，這樣如果列表中的項目太多，我可以將其內容組織在兩列中，到目前為止，我能夠將其組織為兩列像這樣工作：但是，我試圖使列表在只有幾個項目時在容器的中心垂直對齊，所以它看起來像這樣：.slide { width: 874pt; height: 492pt; position: relative; margin: 0 auto; overflow: hidden; border: 1px solid #000; background-color: #FFF;}.content { display: flex; align-items: center; height: 100%;}ul.product-list { position: absolute; left: 10%; list-style-type: none; padding: 0; margin: 0;}ul.product-list li.product-item { display: flex; align-items: center; break-inside: avoid;}ul.product-list li.product-item:not(:last-child) { margin-bottom: 10px;}ul.product-list li.product-item img { border-radius: 50%; margin-right: 10px; width: 74px; height: 74px;}<section class="slide"> <div class="content"> <ul class="product-list"> <li class="product-item"> <img src="https://via.placeholder.com/60" alt=""> <span>Item</span> </li> <li class="product-item"> <img src="https://via.placeholder.com/60" alt=""> <span>Item</span> </li> <li class="product-item"> <img src="https://via.placeholder.com/60" alt=""> <span>Item</span> </li> <li class="product-item"> <img src="https://via.placeholder.com/60" alt=""> <span>Item</span> </li> </ul> </div></section>由于列表的內容將動態填充，我希望它們在容器的中心保持對齊，這可以通過此標記和 css 列來實現嗎？如果沒有，讓這個布局發揮作用的好方法是什么？
3 回答
慕容3067478
TA貢獻1773條經驗 獲得超3個贊
更改彎曲方向并將彎曲添加到藍色容器
.slide {
width: 100vw;
height: 500px;
margin: 0 auto;
background-color: rgb(163, 163, 163);
}
ul.product-list li.product-item {
display: flex;
align-items: center;
break-inside: avoid;
}
ul.product-list li.product-item:not(:last-child) {
margin-bottom: 10px;
}
ul.product-list li.product-item img {
border-radius: 50%;
margin-right: 10px;
width: 74px;
height: 74px;
}
ul.product-list {
list-style-type: none;
width: 80vw;
border: 2px solid blue;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content {
display: flex;
height: 100%;
width: 90vw;
border: 3px solid red;
margin: 0 auto;
}
.product-item {
border: 3px solid lime;
padding: 1vh 1vw;
}
<section class="slide">
<div class="content">
<ul class="product-list">
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
</ul>
</div>
</section>
<section class="slide">
<div class="content">
<ul class="product-list">
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
GCT1015
TA貢獻1827條經驗 獲得超4個贊
以下 css 應該滿足您的要求：
.slide {
width: 874pt;
height: 492pt;
margin: auto;
border: 1px solid #000;
background-color: #FFF;
}
ul.product-list {
list-style-type: none;
display: flex;
flex-flow: column;
flex-wrap: wrap;
align-items: center;
height: 500px;
}
ul.product-list li.product-item {
margin-bottom: 10px;
}
ul.product-list li.product-item img {
border-radius: 50%;
margin-right: 10px;
width: 74px;
height: 74px;
}
確保將 content 類應用到 ul 元素。這是一個stackblitz 示例
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
這是在無序列表元素中僅使用 CSS 列 的替代解決方案，在這種情況下，列中的項目在頂部對齊，但在添加更多項目時列表本身保持垂直居中。
* {
box-sizing: border-box;
}
.slide {
width: 874pt;
height: 492pt;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 1px solid #000;
background-color: #FFF;
}
.content {
display: flex;
align-items: center;
height: 100%;
}
ul.product-list {
position: absolute;
min-height: fit-content;
max-height: 100%;
left: 10%;
list-style-type: none;
padding: 35px 0;
margin: 0;
-webkit-columns: 2;
columns: 200px auto;
}
ul.product-list li.product-item {
display: flex;
align-items: center;
break-inside: avoid;
}
ul.product-list li.product-item:not(:last-child) {
margin-bottom: 10px;
}
ul.product-list li.product-item img {
border-radius: 50%;
margin-right: 10px;
width: 74px;
height: 74px;
}
<section class="slide">
<div class="content">
<ul class="product-list">
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
</ul>
</div>
</section>
<section class="slide">
<div class="content">
<ul class="product-list">
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
<li class="product-item">
<img src="https://via.placeholder.com/60" alt="">
<span>Item</span>
</li>
</ul>
</div>
</section>
- 3 回答
- 0 關注
- 200 瀏覽
添加回答
舉報
0/150
提交
取消