小部件宽度：50% + 50% > 100%？答案

【问题标题】：Widget widths: 50% + 50% > 100%?小部件宽度：50% + 50% > 100%？
【发布时间】：2012-08-26 03:43:33
【问题描述】：

我正在使用 Google Apps Script 和 Apps Script UI Builder，它基于 GWT 小部件。

如果我创建一个流面板，并添加两个宽度为 50% 的标签，那么这些标签会出现在不同的行上。但不是 50% + 50% = 100%。

如何让它们出现在同一行？

自己尝试一下：

当然，这个问题不仅仅适用于标签问题。总的来说，我对如何使用 UI Builder 构建流畅的布局感到非常困惑。似乎有（隐藏的？）填充和边距使事情变得非常困难。

【问题讨论】：

【解决方案1】：

这一切都基于 CSS 及其盒子模型，而在过去 15 年左右的时间里，这个问题已经积累了很多。本质上，您指定的宽度没有考虑边距（和/或可能的填充，已经有一段时间了），因此您需要添加一个样式表来最小化它们。看到这样的东西CSS reset。

【讨论】：

我对 CSS 很了解，但在这种情况下，我认为我不需要费心去处理它。请注意，这些小部件不是 native HTML 小部件。它们是 GWT 小部件，转换为有点难看的 HTML（很多表格等）。
GWT 位于 HTML 之上并发出 HTML，受 CSS 规则影响。没有本机/非本机的问题，都是 HTML。抱歉，抽象漏洞等等。
GWT 抽象 HTML。加载 CSS 重置 感觉不对，即使使用 Apps 脚本 也是可能的。有设置白名单 CSS 属性的特殊功能。

【解决方案2】：

Labels 转换为<div>s，默认出现在不同的行。您可以尝试在标签中添加float: left，或者更改显示模式等。

你也可以试试InlineLabels，我认为可以编译成<span>s。

如果您已经尝试过所有这些，那么您的Labels 显然太宽了。两个 50% 的对象不能放在同一行上很烦人，但是使用 HTML 和 CSS 有什么不烦人的呢？

【讨论】：

UI builder中的标签在Flow Panel中使用时默认不会出现在不同的行上。相应的 CSS (float) 会自动应用。试试看，看看使用例如Chrome 开发者工具。
它必须取决于您加载的主题。我禁用了所有内置的 GWT 样式。我想知道 Google Apps 使用什么 - 可能是默认设置。
据我所知，对于使用 Apps Script GUI Builder 构建的 UI，没有主题的概念。 default 标签的 HTML（无自定义设置），使用 Apps Script GUI Builder 创建：<div class="gwt-Label" style="display: block; width: 120px; z-index: 9; overflow: hidden; margin: 3px; height: 25px; background-color: white; float: left; position: relative; ">Label</div>

【解决方案3】：

解决方案很简单。对于两个标签，设置为 zero:

边框和边距/边距

不知道为什么我昨天没看到 - 我正在值夜班... ;-)

【讨论】：

这是 Tassos Bassoukos 的回答。
我不同意：我问的是如何在 GUI Builder 中做事。此外，按照 Tassos 的建议，使用 CSS Reset 没有任何意义。 Google Apps GUI (Builder) 小部件抽象 HTML 和 CSS。