這是我的按鈕。
如何使按鈕右側的SVG圖示，但“重試”保持在左側？
這是我的代碼
.errorButtonRetry {
position: absolute;
height: 31px;
left: 61px;
top: 262px;
width: 210px;
background: blue;
border-radius: 2px;
border: none;
text-align: left;
padding-left: 12px;
display: flex;
padding-top: 6px;
cursor: pointer;
}
.button__text {
color: #FFFFFF;
font-family: Source Code Pro;
font-weight: 500;
font-size: 13px;
padding-top: 1px;
}<button class='errorButtonRetry'>
<span class='button__text'>Retry</span>
<div class="iconWrapper" style="width: 18px; height: auto;">
<!-- svg is the circle-cross icon -->
<svg viewbox="0 0 512 512">
<path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176"/>
</svg></div>
</button>我想要左側的文本“重試”和右側的 SVG 圖示。
uj5u.com熱心網友回復：
您可以在類上使用 CSSflexbox屬性。justify-content: space-between;errorButtonRetry
像那樣 ：
.errorButtonRetry {
position: absolute;
height: 31px;
left: 61px;
top: 262px;
width: 210px;
background: blue;
border-radius: 2px;
border: none;
padding-left: 12px;
display: flex;
justify-content: space-between;
padding-top: 6px;
cursor: pointer;
}
.button__text {
color: #FFFFFF;
font-family: Source Code Pro;
font-weight: 500;
font-size: 13px;
padding-top:1px;
}<button class='errorButtonRetry'>
<span class='button__text'>Retry</span>
<div class="iconWrapper" style="width: 18px; height: auto;">
<!-- svg is the circle-cross icon -->
<svg viewbox="0 0 512 512">
<path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="32" />
<path fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176" />
</svg>
</div>
</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/532216.html
標籤：htmlcss按钮弹性盒