我正在使用 Vue.js 为应用程序处理数据表，我遇到了有关输入元素位置的问题。要求是某些列应具有可通过输入框和下拉列表编辑的值。但是，出于某种原因，我无法完全正确地定位。我可以毫无问题地对齐行中未修改的组件，但是当我修改组件内部的值时，它会向下移动并扩展行。我必须修改行的行高，并删除所有行元素上的填充，以实现此目的。这是一个例子:
之前:
在左侧的文本字段中键入内容后，单击离开，然后在内部单击以修改值:
清除值并单击远离文本输入后，它会返回到其原始状态。下拉菜单也会产生类似的效果。下拉菜单的另一个问题是菜单完全被行的边界挡住了。我可以通过删除“position:relative”样式使菜单可见，但组件未对齐，如下所示:
否则就是这样:
注意框如何移动到行的顶部。
通过删除行中元素的所有填充，然后使用 top: 8px 使每个组件居中，我已经实现了我目前所拥有的。但是，当我检查 Chrome 开发工具时，我看到有填充，即使我从我的 CSS 中将所有方向的填充设置为 0(padding-right 除外，它是 8px)。
我真的不知道为什么会出现这些问题。我想要的是让文本字段和下拉菜单保持不变，并且让下拉元素在不移动的情况下可见。我该怎么做才能实现这一目标？
最佳答案
在两种类型的输入内容上方有一个额外的区域用于标签，它会产生额外的空间并导致元素移动。删除那个空标签后，一切正常。
关于数据表中输入和下拉的 CSS 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49201269/