javascript - 有没有办法根据所选 <option> 的长度调整 <select> 的宽度?

标签 javascript css

我想实现类似亚马逊在其搜索栏左侧的效果(尽管他们使用的是 div)。

我猜单靠 CSS 并不能解决问题。我认为需要 javascript 来计算所选字母的数量并将其乘以某个值(可能是 3px?)并将其用作父级的宽度。

最佳答案

您只需将 width: auto;display: inline-block; 添加到将代表选项项的 div 中,它将根据其内容自动调整大小。

http://jsfiddle.net/JKxTQ/1/

更新 2:

使用 div 作为宽度指示器,这样您就可以使用它的宽度来调整选择框的大小:

http://jsfiddle.net/JKxTQ/6/

关于javascript - 有没有办法根据所选 <option> 的长度调整 <select> 的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16887557/

相关文章:

javascript - focus() 在 Safari 或 chrome 中不起作用

html - IE8 优化问题(<div> 中的 float 元素,&lt;header&gt; 中的渐变...)

html - Flexbox 在盒子中居中

css - Firefox 在溢出滚动时使空 div 具有高度

javascript - 使用 JS 在单击时更改 DIV z-index 并返回原始值

javascript - 在两个 div 之间切换,打开后重置

javascript - 在 React div 中渲染对象有什么意义吗?

javascript - 谷歌地图显示灰色框而不是 map

asp.net - 通过javascript禁用文本框中的退格键

javascript - 鼠标焦点没有轮廓但键盘焦点仍然有轮廓?