CSS让两个标签在同一行显示并自适应宽度
示例:svg 和 span 在同一行上并自适应宽度
使用 Flexbox 布局
HTML
<div class="flex-container"><svg class="svg-icon" aria-hidden="true"><use :xlink:href="`#icon-signal`" /></svg><span>100%</span>
</div>
CSS
.flex-container {display: flex; /* 使用 Flexbox 布局 */align-items: center; /* 垂直居中对齐 */
}
使用 Grid 布局
HTML
<div class="grid-container"><svg class="svg-icon" aria-hidden="true"><use :xlink:href="`#icon-signal`" /></svg><span>100%</span>
</div>
CSS
.grid-container {display: grid; /* 使用 Grid 布局 */grid-template-columns: auto auto; /* 列宽度自适应内容 */align-items: center; /* 垂直居中对齐 */
}