jQuery ui 滑块移动整个表格

Posted

技术标签:

【中文标题】jQuery ui 滑块移动整个表格【英文标题】:jQuery ui slider moves the whole form table 【发布时间】:2011-10-20 20:23:21 【问题描述】:

我在使用我的联系表单生成器时遇到了问题。

当我使用 jQuery 滑块时,如果我将滑块移动到“0”,整个表单会向右移动一点。如果我将滑块移动到“100”,整个表单会向左移动一点。

我使用表格来保持表格的结构。 Link to my form

【问题讨论】:

【参考方案1】:

您没有考虑显示货币数量的容器的相对位置;随着小数变大,会推动您的内容。要么使其绝对定位,要么考虑可以占用的最大空间(给它一个具有 100 空间的宽度)。

您必须对确定布局的父级执行此操作。在这种情况下,表的 th。我强烈建议您停止使用表格作为制作布局的工具。您应该使用为创建布局而制作的语义标签。

【讨论】:

谢谢.. 解决了这个问题.. 我知道使用表格不利于布局,所以我正在开发一个新版本,我只会使用 div 作为结构..【参考方案2】:

这只是标签大小的问题,您在标签上放置了固定宽度 (width:20px),这是一个内联元素。

但是你不能在内联元素上这样做,所以它的大小会随着文本的变化而变化。如果你放一个 div ,像这样: <div style="width:40px">yourtext<label></label></div> 宽度不会改变。

编辑:更好地了解如何将宽度与内联元素一起使用:CSS fixed width in a span

【讨论】:

以上是关于jQuery ui 滑块移动整个表格的主要内容,如果未能解决你的问题,请参考以下文章

jquery滑块,上面的值与滑块一起移动

更改 jQuery UI 滑块值选项时动画滑块句柄?

jQuery UI 滑块步骤

jQuery UI滑块步骤

jQuery UI:滑块位置更改时的操作

如何防止多个句柄在 jQuery UI 滑块中重叠?