首頁猿問如何用CSS阻止元素溢出？

如何用CSS阻止元素溢出？

Html5

慕尼黑的夜晚無繁華 2023-10-04 15:16:26

我有一個 SVG 圖標（Font Awesome），它不斷溢出并超出我的導航欄。我嘗試過overflow: hidden;，但沒有改變任何東西。請幫助我理解并解決問題。更新#1：我注意到，如果我不設置position（默認為static），那么它的行為就像正常的一樣。但我需要設置position為，relative因為我正在使用該right屬性來對齊項目。我還注意到，將位置從靜態更改為任何位置都會產生問題。HTML 結構-<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貢獻1815條經驗獲得超6個贊

問題是你沒有設置svg圖像height width，我設置了它，20px你可以根據你的要求更改它

第二次使用z-index:1111您的圖標header/nav，使您的svg圖標位于標題后面

.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;

}

<h5>PewDiePie</h5>

</path>

</svg>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

反對回復 2023-10-04

青春有我

TA貢獻1784條經驗獲得超8個贊

如果我正確理解你的要求，那么你希望 svg 位于右側嗎？

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

在藍色標題上使用z-index:1（或更大的整數，我假設沒有z-index用于標題的元素），以便圖標將保留在.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;

}

<h5>PewDiePie</h5>

</path>

</svg>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

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

</div>

</a>

</div>

反對回復 2023-10-04

2 回答
0 關注
132 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何用CSS阻止元素溢出？

如何用CSS阻止元素溢出？

2 回答

添加回答

如何用CSS阻止元素溢出？

如何用CSS阻止元素溢出？