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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在某個斷點 CSS 后使溢出滾動

在某個斷點 CSS 后使溢出滾動

慕蓋茨4494581 2023-10-30 20:05:39
我有以下代碼,其中容器中有(可變)數(shù)量的按鈕,調整屏幕大小時按鈕的位置正確調整為容器的寬度,但我想要實現(xiàn)的是在某個斷點處,按鈕應該停止重新定位自己,而是讓容器滾動overflow-y,并將按鈕保持在其位置。.container {  max-width: 800px;  background-color: beige;}.btn {  width: 80px;}.btn span{  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  display: block;}<div class="container">  <button class="btn"><span>test</span></button>  <button class="btn"><span>test123</span></button>  <button class="btn"><span>test450354053</span></button>  <button class="btn"><span>test23R02020202</span></button>  <button class="btn"><span>test33030494</span></button>  <button class="btn"><span>test403930390</span></button>  <button class="btn"><span>test</span></button>  <button class="btn"><span>test23423049</span></button>  <button class="btn"><span>testé</span></button>  <button class="btn"><span>test2340</span></button>  <button class="btn"><span>test234234</span></button>  <button class="btn"><span>test2342</span></button>  <button class="btn"><span>test2342020</span></button>  <button class="btn"><span>test2202349</span></button>  <button class="btn"><span>testé</span></button>  <button class="btn"><span>test234029</span></button>  <button class="btn"><span>test20203030</span></button>  <button class="btn"><span>test340</span></button>  <button class="btn"><span>test234240</span></button>  <button class="btn"><span>test2342340</span></button>  <button class="btn"><span>test23420420</span></button></div>
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經(jīng)驗 獲得超3個贊

在這個特定的例子中,min-width帶有給定斷點(例如400px)并overflow: auto設置在.container將工作正常


.container {

  max-width: 800px;

  min-width: 400px;

  overflow: auto;

  background-color: beige;

}


.btn {

  width: 80px;

}

.btn span{

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  display: block;

}

<div class="container">

  <button class="btn"><span>test</span></button>

  <button class="btn"><span>test123</span></button>

  <button class="btn"><span>test450354053</span></button>

  <button class="btn"><span>test23R02020202</span></button>

  <button class="btn"><span>test33030494</span></button>

  <button class="btn"><span>test403930390</span></button>

  <button class="btn"><span>test</span></button>

  <button class="btn"><span>test23423049</span></button>

  <button class="btn"><span>testé</span></button>

  <button class="btn"><span>test2340</span></button>

  <button class="btn"><span>test234234</span></button>

  <button class="btn"><span>test2342</span></button>

  <button class="btn"><span>test2342020</span></button>

  <button class="btn"><span>test2202349</span></button>

  <button class="btn"><span>testé</span></button>

  <button class="btn"><span>test234029</span></button>

  <button class="btn"><span>test20203030</span></button>

  <button class="btn"><span>test340</span></button>

  <button class="btn"><span>test234240</span></button>

  <button class="btn"><span>test2342340</span></button>

  <button class="btn"><span>test23420420</span></button>


</div>


查看完整回答
反對 回復 2023-10-30
  • 1 回答
  • 0 關注
  • 143 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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