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

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; /* 垂直居中对齐 */
}
相关推荐
却尘7 分钟前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
Asort10 分钟前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript
跟橙姐学代码11 分钟前
自动化邮件发送的终极秘籍:Python库smtplib与email的完整玩法
前端·python·ipython
葡萄城技术团队31 分钟前
浏览器为啥要对 JavaScript 定时器“踩刹车”?
javascript
我是ed35 分钟前
# vue3 实现甘特图
前端
m0_616188491 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang1 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
xw51 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥2 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒2 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端