我有這個
<button class="jumpButton">"Click me" <svg class="arrowsvg"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>
我想更改“點擊我”的 CSS，但更改也會更改 SVG。
.jumpButton #text {
}
那是行不通的。我無法編輯 HTML，我想將“點擊我”放在 SVG 的右側。我也無權訪問 Javascript。
uj5u.com熱心網友回復：
您需要定位 SVG 并將其浮動到左側
svg {
width: 20px;
height: 20px;
float: left;
}
button {
line-height:20px;
}<button class="jumpButton">"Click me" <svg class="arrowsvg"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>uj5u.com熱心網友回復：
既然你說你不能改變 html 并且 CSS 沒有一個元素內的文本選擇器，它周圍沒有標簽，我認為你需要定位 svg position: absolute。
.jumpButton {
position: relative;
padding-left: 24px; /* This creates space for the icon */
}
.arrowsvg {
content: "";
position: absolute;
left: 0;
}
這應該完成您正在嘗試做的事情。在我的測驗中，svg 只是不必要地占用了大量空間，這使得準確定位變得困難。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/414245.html
標籤：