首页猿问如何用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 关注
98 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何用CSS阻止元素溢出？

如何用CSS阻止元素溢出？

2 回答

添加回答