第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

Flexbox 列換行列表，無重疊項(xiàng)目

Flexbox 列換行列表，無重疊項(xiàng)目

牧羊人nacy 2023-12-11 10:19:24
我有一個(gè)列表，我想將其包裝在最大寬度為 540px 的彈出模式上顯示。通常，它看起來像這樣：但如果添加太多名字，那么它就會像這樣重疊：我的目標(biāo)是通過隱藏溢出（僅顯示基于數(shù)據(jù)的最大可能列）或使其可滾動來防止名稱重疊。當(dāng)項(xiàng)目數(shù)量和名稱長度未知時(shí)，如何包裝列表以占用水平和垂直空間（如下所示）但防止項(xiàng)目重疊？這是我當(dāng)前使用的 html 和 css 的片段：.modal {  width: 600px;}.wrapped-list {  margin-top: 12px;  max-height: 200px;  display: flex;  flex-direction: column;  flex-wrap: wrap;}<div class="modal"></div>
查看完整描述

2 回答

?
慕尼黑5688855

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊

使用 Flexbox 因column wrap錯(cuò)誤而臭名昭著（請參閱下面的部分列表）。

column wrap這種設(shè)置有很多問題，我建議盡可能遠(yuǎn)離。請row wrap改用 CSS Grid 或 CSS Grid。

在這種特殊情況下，列正確地包裝了內(nèi)容，但 Flex 算法沒有考慮容納列表項(xiàng)標(biāo)記所需的寬度。

為了說明這一點(diǎn)，下面是帶有邊框的內(nèi)容：

.modal {

? width: 600px;

}


.wrapped-list {

? margin-top: 12px;

? max-height: 200px;

? display: flex;

? flex-direction: column;

? flex-wrap: wrap;

}


li {

? border: 1px solid red;

}

<div class="modal">

<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>

</div>

從第一列中可以清楚地看到，標(biāo)記被排除在寬度計(jì)算之外，并且與以下列中的內(nèi)容重疊。

如果您打算堅(jiān)持使用column wrap，則可以嘗試通過為所有項(xiàng)目添加左邊距來補(bǔ)償缺失的寬度，從第二列中的第一項(xiàng)開始。

像這樣的東西：

li:nth-child(n?+?11)?{
??margin-left:?45px;
}

.modal {

? width: 600px;

}


.wrapped-list {

? margin-top: 12px;

? max-height: 200px;

? display: flex;

? flex-direction: column;

? flex-wrap: wrap;

? overflow: auto;

}


li:nth-child(n + 11) {

? margin-left: 45px;

}

<div class="modal">

<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>

</div>

flexbox 的部分問題列表column wrap：

  • 當(dāng) Flexbox 項(xiàng)目以列模式換行時(shí)，容器不會增加其寬度

  • Flexbox：當(dāng)flex-direction：column，flex-wrap：wrap時(shí)，寬度計(jì)算錯(cuò)誤

  • 彈性項(xiàng)目是否可以與其上方的項(xiàng)目緊密對齊？

  • flex-wrap 在嵌套的 Flex 容器中不起作用

  • Flex 容器的高度在 Safari 中無法正常工作

  • Flexbox 列換行列表，無重疊項(xiàng)目


查看完整回答
反對 回復(fù) 2023-12-11
?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

你可以這樣做：


.modal {

  width: 600px;   

  max-height: 200px;

}


.wrapped-list {

    width: 600px;

  margin-top: 12px;

  max-height: 200px;

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

   overflow-x:auto;

 }

 

.wrapped-list li{

   padding-right:50px; 

 }

<div class="modal">

  <ol class="wrapped-list">

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

  </ol>

</div>


查看完整回答
反對 回復(fù) 2023-12-11
  • 2 回答
  • 0 關(guān)注
  • 171 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號