如何利用HTML的CSS的resize: horizontal只允许用户水平方向拖拽调整元素宽度-html教程-PHP中文网

resize: horizontal 生效需同时满足 display 非 inline（如 block、inline-block、flex）且 overflow 非 visible（须设为 auto、scroll 或 hidden）；否则拖拽手柄不显示。

如何利用html的css的resize: horizontal只允许用户水平方向拖拽调整元素宽度

直接给元素设 resize: horizontal 是没用的，必须配合 overflow 和显示类型才能生效。

为什么 `resize: horizontal` 不显示拖拽手柄

浏览器只在满足两个硬性条件时才渲染水平调整手柄：元素必须能产生滚动容器（即 display 不能是 inline），且 overflow 不能是 visible。常见错误是只写 resize: horizontal 却漏掉 overflow 设置，结果手柄完全不出现。

display 至少要是 block、inline-block 或 flex —— span 默认是 inline，加了 resize: horizontal 也会被忽略
overflow 必须显式设为 auto、scroll 或 hidden；visible（默认值）直接禁用 resize 功能
如果内容没溢出，overflow: auto 实际不显示滚动条，但手柄仍会出现；overflow: hidden 则完全不显示滚动条，仅靠拖拽改变尺寸

`resize: horizontal` 的典型可用场景

适合需要用户自由调节宽度、但高度固定或由内容决定的容器，比如侧边栏、搜索输入区、代码行号列等。注意它对 textarea 同样有效，但需防 UI 框架重置。

给 textarea 用时，检查是否被全局样式设了 resize: none —— 这是很多 CSS 重置库（如 Normalize.css）或组件库（如 Ant Design）的默认行为
若 textarea 内容单行不换行，水平拉伸可能无视觉反馈（宽度变了但内容不重排），建议加 white-space: pre-wrap 或限制 min-width
在 Flex 容器中使用时，resize: horizontal 手柄始终锚定在右边缘，不会随 justify-content 移动；想让它贴左？得手动 JS 实现

最小可行 CSS 组合示例

以下这段 CSS 能让一个 div 稳定支持水平拖拽：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

div.resizable-h {
  display: inline-block; /* 或 block */
  overflow: auto;        /* 关键：触发 resize 手柄 */
  resize: horizontal;
  min-width: 100px;      /* 防止拖到看不见 */
  width: 200px;
  height: 80px;          /* 高度固定，避免 vertical 干扰 */
  border: 1px solid #ccc;
}

注意：height 建议设具体值或 min-height，否则某些浏览器（如 Safari）可能因高度塌缩导致手柄错位或消失。

容易被忽略的兼容性细节

resize: horizontal 在所有现代浏览器中都支持，但行为细节有差异：

Firefox 和 Chrome 对 overflow: auto + resize: horizontal 的响应最稳定；Safari 要求元素有明确 border 或 padding 才显示手柄
手柄永远出现在右边缘，无法用 CSS 移动位置，也不能监听点击事件——它不是 DOM 节点，只是 UA 渲染层图形
如果父容器设了 max-width 或 flex-basis，可能截断拖拽范围，实际宽度不会超过这些限制

真正需要“整条右边框都能拉”或“拖拽时实时计算布局”的，就得放弃 resize，改用 mousemove + getBoundingClientRect() 手动实现——原生 resize 就是个右下角小方块，别指望它做更多。