CSS让两个标签在同一行显示并自适应宽度

黎明晓月2023-11-13 13:45

CSS让两个标签在同一行显示并自适应宽度

示例：svg 和 span 在同一行上并自适应宽度

使用 Flexbox 布局

HTML

html 复制代码

<div class="flex-container">
    <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="`#icon-signal`" />
    </svg>
    <span>100%</span>
</div>

CSS

css 复制代码

.flex-container {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
}

使用 Grid 布局

HTML

html 复制代码

<div class="grid-container">
    <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="`#icon-signal`" />
    </svg>
    <span>100%</span>
</div>

CSS

css 复制代码

.grid-container {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: auto auto; /* 列宽度自适应内容 */
    align-items: center; /* 垂直居中对齐 */
}