CSS 让元素根据内容自适应宽度

一、需求

点击链接跳转,只点击标红区域才跳转,右侧空白区域不要跳转

二、实现

宽度太宽,导致右侧空白区域也加了跳转效果,修改为 将元素的最大宽度设置为其内容所需的宽度。

方法一:建议方式

使用 display: inline-block;

css 复制代码
.container {
  display: inline-block; /* 将元素显示为内联块级元素 */
}

使用 display: inline-block; 还可以让多个元素在同一行显示,并且可以设置宽度、高度、内边距等样式;

可以让块级元素表现得像内联元素一样,并且保留块级元素的特点。这个属性经常被用来实现水平排列元素或者让元素根据内容自适应宽度。

方法二:

max-width: fit-content; 是一种 CSS 样式属性,它用于将元素的最大宽度设置为其内容所需的宽度。

请注意,fit-content 是一个比较新的 CSS 属性值,不是所有浏览器都支持它。在使用之前,请确保目标浏览器支持该属性,或者考虑提供替代方案以确保兼容性。

相关推荐
zhensherlock7 分钟前
Protocol Launcher 系列:Beorg 高效任务管理的协议支持
前端·javascript·typescript·node.js·自动化·github·js
ppandss19 分钟前
JavaWeb从0到1-DAY3.1- Vue(ii)
前端·javascript·vue.js
M ? A9 分钟前
Vue 转 React | VuReact编译工具快速入门
前端·javascript·vue.js·后端·react.js·面试·vureact
qq_4275398312 分钟前
iframe 嵌入预览 PDF ,禁用右键菜单、打印下载按钮不展示
前端·javascript·vue.js·pdf
yu859395815 分钟前
降低OFDM系统PAPR的各种算法及误码率分析
前端·算法
ZC跨境爬虫15 分钟前
跟着 MDN 学 HTML day_3:(表单CSS美化实战与盒子模型三大核心属性详解)
前端·javascript·css·html
张风捷特烈24 分钟前
状态管理大乱斗#05 | Riverpod 源码评析 (中) - 上层建筑
android·前端·flutter
土豆125027 分钟前
Rust 生命周期开发实战:从"编译不过"到"一次过编"的实用指南
前端·rust
candyTong9 小时前
一觉醒来,大模型就帮我排查完页面性能问题
前端·javascript·架构