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

Posted 2023-02-15

【中文标题】最佳就地额外宽度杀死布局

【英文标题】：best-in-place extra width kills layout

【发布时间】：2013-04-22 02:28:26

【问题描述】：

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

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

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

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

【问题讨论】：

有趣的宝石。您要分类的输入是 form > input#best_in_place。我担心的是块元素（表单）嵌套在一个跨度中，（一个内联元素）如果它是一个div会更好。无论如何，在我看来，子输入，其父表单都小于父 td 元素的宽度。我会让这个简单并明确地将 input#best_in_place 的宽度值设置为一个好的一般宽度。我认为让表单宽度与您要替换的文本匹配是很多不必要的计算，因为该文本无论如何都会发生变化。

@kyle：感谢您对此的看法。我想我将为不同的标准宽度定义一些类，例如 .bip_small > form > input#best_in_place width:30px; .bip_med > form > input#best_in_place width:60px; .bip_large > form > input#best_in_place 宽度：120px;

【参考方案1】：

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

【参考方案2】：

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

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

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