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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何用CSS阻止元素溢出?

如何用CSS阻止元素溢出?

我有一個(gè) SVG 圖標(biāo)(Font Awesome),它不斷溢出并超出我的導(dǎo)航欄。我嘗試過(guò)overflow: hidden;,但沒(méi)有改變?nèi)魏螙|西。請(qǐng)幫助我理解并解決問(wèn)題。更新#1:我注意到,如果我不設(shè)置position(默認(rèn)為static),那么它的行為就像正常的一樣。但我需要設(shè)置position為,relative因?yàn)槲艺谑褂迷搑ight屬性來(lái)對(duì)齊項(xiàng)目。我還注意到,將位置從靜態(tài)更改為任何位置都會(huì)產(chǎn)生問(wèn)題。HTML 結(jié)構(gòu)-<div class="collapsible-card">  <div class="collapsible-card-title">    <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">    <h5>PewDiePie</h5>    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">      <path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">      </path>    </svg> </div> <div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">  <div class="collapsible-card-items">    <a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank">       <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">      <div class="collapsible-card-item-info-container">         <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>         <span>2020-03-13</span>       </div>     </a>   </div>   <div class="collapsible-card-items">     <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank">        <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">       <div class="collapsible-card-item-info-container">         <h3>I'm Back in Minecraft! - Part 39</h3>         <span>2020-03-06</span>       </div>     </a>   </div>
查看完整描述

2 回答

?
紅糖糍粑

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

問(wèn)題是你沒(méi)有設(shè)置svg圖像height width,我設(shè)置了它,20px你可以根據(jù)你的要求更改它


第二次使用z-index:1111您的圖標(biāo)header/nav,使您的svg圖標(biāo)位于標(biāo)題后面


.collapsible-card {

      background-color: #353638;

      margin: 0 5px 20px 5px;

      border-radius: 20px;

    

      transition: display 1.5s ease-in-out;

    }

    

    .collapsible-card-title {

      display: flex;

      flex-direction: row;

      align-items: center;

      font-size: 2.75em;

      cursor: pointer;

      /* background-color: rgb(107, 218, 74); */

    }

    

    .collapsible-card-title svg {

      overflow: hidden !important;

      color: #ff304f;

      margin-left: auto;

      margin-right: 25px;

      width: 20px;

    height: 20px;

    }

    

    .collapsible-card-title img {

      width: 88px;

      height: 88px;

      border-top-left-radius: 20px;

      border-bottom-left-radius: 20px;

      margin-right: 20px;

    }

    

    .collapsible-card-items a {

      display: flex;

      flex-direction: row;

      align-items: center;

      font-size: 1.5em;

      background-color: #2d2f31;

      margin-bottom: 10px;

    }

    

    .collapsible-card-item-info-container {

      margin-left: 20px;

    }

    

    .collapsible-card-item-container {

      display: none;

      overflow: hidden;

      max-height: 0;

      background-color: #262729;

      transition: max-height 0.35s ease-in-out;

    }

<div class="collapsible-card"><div class="collapsible-card-title">

  <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">

  <h5>PewDiePie</h5>

  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">

</path>

  </svg>

</div>

<div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">

  <div class="collapsible-card-items">

<a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank"> 

  <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">

  <div class="collapsible-card-item-info-container">

<h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>

<span>2020-03-13</span>

   </div>

</a>

   </div>

   <div class="collapsible-card-items">

<a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank"> 

   <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">

   <div class="collapsible-card-item-info-container">

<h3>I'm Back in Minecraft! - Part 39</h3>

<span>2020-03-06</span>

   </div>

</a>

   </div>

   <div class="collapsible-card-items">

<a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank"> 

   <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">

   <div class="collapsible-card-item-info-container">

<h3>Subnautica Part 1 (OMG GAME)</h3>

<span>2020-03-15</span>

</div>

  </a>

</div>

<div class="collapsible-card-items">

  <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">

<img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">

<div class="collapsible-card-item-info-container">

  <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>

  <span>2020-03-20</span>

</div>

  </a>

</div>

<div class="collapsible-card-items">

   <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">

<img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">

<div class="collapsible-card-item-info-container">

   <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ?? ??#76</h3>

   <span>2020-03-03</span>

</div>

   </a>

</div>

<div class="collapsible-card-items">

  <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">

<img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">

<div class="collapsible-card-item-info-container">

  <h3>Video flagged for: False Information  [MEME REVIEW] ?? ??#73</h3>

  <span>2019-12-20</span>

</div>

  </a>

</div>

  </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-10-04
?
青春有我

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

如果我正確理解你的要求,那么你希望 svg 位于右側(cè)嗎?


您使用的尺寸svg大于您需要的尺寸,因此您需要提供 和height,width為了便于理解,我添加了一個(gè) border white。您可以繼續(xù)刪除該邊框并設(shè)置您自己的邊框,height然后width大家就都設(shè)置好了。


在藍(lán)色標(biāo)題上使用z-index:1(或更大的整數(shù),我假設(shè)沒(méi)有z-index用于標(biāo)題的元素),以便圖標(biāo)將保留在.header


.collapsible-card {

  background-color: #353638;

  margin: 0 5px 20px 5px;

  border-radius: 20px;

  transition: display 1.5s ease-in-out;

}


.collapsible-card-title {

  display: flex;

  flex-direction: row;

  align-items: center;

  font-size: 2.75em;

  cursor: pointer;

  /* background-color: rgb(107, 218, 74); */

}


.collapsible-card-title svg {

  height: 50px; /* use your desired height as per your requirement */

  color: #ff304f;

  margin-left: auto;

  position: relative;

  right: 25px;

  border:1px solid white;

}


.collapsible-card-title img {

  width: 88px;

  height: 88px;

  border-top-left-radius: 20px;

  border-bottom-left-radius: 20px;

  margin-right: 20px;

}


.collapsible-card-items a {

  display: flex;

  flex-direction: row;

  align-items: center;

  font-size: 1.5em;

  background-color: #2d2f31;

  margin-bottom: 10px;

}


.collapsible-card-item-info-container {

  margin-left: 20px;

}


.collapsible-card-item-container {

  display: none;

  overflow: hidden;

  max-height: 0;

  background-color: #262729;

  transition: max-height 0.35s ease-in-out;

}

<div class="collapsible-card">

  <div class="collapsible-card-title">

    <img src="https://yt3.ggpht.com/a/AATXAJzlZzr16izsGHBCHIkO3H7n-UiHyZPCJFEPiQ=s88-c-k-c0xffffffff-no-rj-mo" class="unselectable" alt="Youtuber's Logo">

    <h5>PewDiePie</h5>

    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14 drop-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

      <path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">

      </path>

    </svg>

  </div>

  <div class="collapsible-card-item-container" style="display: block; max-height: 1140px;">

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=8HHZiNdrZGA" target="_blank">

        <img src="https://i.ytimg.com/vi/8HHZiNdrZGA/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>I Made The WORST Minecraft MISTAKE There Is. .. - Part 40</h3>

          <span>2020-03-13</span>

        </div>

      </a>

    </div>

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=1B1f9PGLbIs" target="_blank">

        <img src="https://i.ytimg.com/vi/1B1f9PGLbIs/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>I'm Back in Minecraft! - Part 39</h3>

          <span>2020-03-06</span>

        </div>

      </a>

    </div>

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=WS54qL3GeaI" target="_blank">

        <img src="https://i.ytimg.com/vi/WS54qL3GeaI/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>Subnautica Part 1 (OMG GAME)</h3>

          <span>2020-03-15</span>

        </div>

      </a>

    </div>

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=fq_rzA3RAmY" target="_blank">

        <img src="https://i.ytimg.com/vi/fq_rzA3RAmY/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>Worst TIMING I've EVER HAD in a videogame.......</h3>

          <span>2020-03-20</span>

        </div>

      </a>

    </div>

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=Lq8QxKnN_5I" target="_blank">

        <img src="https://i.ytimg.com/vi/Lq8QxKnN_5I/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>LOST my HAIR, When Hearing New Meme Music! [MEME REVIEW] ?? ??#76</h3>

          <span>2020-03-03</span>

        </div>

      </a>

    </div>

    <div class="collapsible-card-items">

      <a href="https://www.youtube.com/watch?v=K2i-fPWWy4A" target="_blank">

        <img src="https://i.ytimg.com/vi/K2i-fPWWy4A/mqdefault.jpg" alt="Video's Thumbnail">

        <div class="collapsible-card-item-info-container">

          <h3>Video flagged for: False Information [MEME REVIEW] ?? ??#73</h3>

          <span>2019-12-20</span>

        </div>

      </a>

    </div>

  </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-10-04
  • 2 回答
  • 0 關(guān)注
  • 141 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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