如何用CSS阻止元素溢出？
我有一个 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>
慕尼黑的夜晚无繁华浏览 82回答 2
2回答
-
红糖糍粑
问题是你没有设置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; }<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> -
青春有我
如果我正确理解你的要求，那么你希望 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;}<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>
随时随地看视频慕课网APP
相关分类
Html5