css - 最佳就地额外宽度杀死布局

Question

我正在使用最好的 rails gem 来处理内联编辑。

正如您在此示例中所见，只要您单击最佳位置文本，就会弹出一个输入元素：http: //bipapp.heroku.com/users/49

此输入字段的宽度超过了它替换的文本的宽度，从而扩展了父元素的宽度。（这会使用户一个接一个地打开一个输入字段非常烦人，因为每次点击后布局都会改变）

我想要完成的是，此输入字段始终具有与其替换的文本完全相同的宽度，因此它根本不会影响布局。那可能吗？

Answer 1

我刚刚使用开发人员工具检查了您的问题，从 styles.css 中加载了内联文本的样式。和宽度：80%。相信如果你减少这个，你的问题就会得到解决。

Answer 2

如果您查看best_in_place GitHub 页面，gem 支持以下选项来满足您的需求：

1. :html_attrs: html 参数的哈希值，例如 maxlength、default-value 等，将在呈现的输入上设置，而不是 best_in_place 跨度。
2. :inner_class：设置为渲染输入的类。

这就是你控制外观的方式。是的，对于样式是主题一部分的情况，您可以使用一些全局 CSS 默认值。在这种情况下，您有一些喜欢使用的东西span.best_in_place > form.form_in_place > input[type="text"]。