时间戳

首页 > 解决方案 > CSS水平调整大小？

html - CSS水平调整大小？

问题描述

我想要一个框（div 或 textarea 或其他元素），用户可以单击其右边框并拖动右侧边框以使框变小或变大。

我已经能够使用css“resize：horizo​​n;”创建一个div 属性，但我找不到设置抓取器样式的方法，因此它与元素的右边框对齐。

这是我能得到的最接近的。我宁愿不必使用 javascript，而且我绝对不想仅仅为了实现这一点而包含外部包或库。

textarea {
  resize: horizontal; 
}  
::-webkit-resizer {
   border-left: 1px solid black;
   border-right: 1px solid black;
}
<textarea>some text here.</textarea>

标签： htmlcssresize

解决方案

不是整个边框，默认情况下resize只会在右下角插入一个可调整大小的图标，并且只有这个小图标是可拖动的。

请参阅：https ://developer.mozilla.org/en-US/docs/Web/CSS/resize

要拥有整个“边框”，您可以使用以下解决方案： Resize a div on border drag and drop without adding extra markup

推荐阅读