生成的 HTML 元素之间的空格答案

【问题标题】：Spaces between generated HTML elements生成的 HTML 元素之间的空格
【发布时间】：2011-09-20 15:50:58
【问题描述】：

我遇到了一个问题，简单但愚蠢的阻塞。

我构建了一个 GWT (Google Web Toolkit) Web HMI。在一个面板中，我创建了一堆CheckBoxes。每一个都给了我一个span 元素，其中包含input 复选框及其label。到目前为止，一切顺利。

所以我明白了：

<span class="blablabla keepUnited">blabliblu1</span><span class="blablabla keepUnited">blabliblu2</span><span class="blablabla keepUnited">blabliblu3</span><span class="blablabla keepUnited">blabliblu4</span>

在生成的 HTML 代码中，span 元素粘在一起。这弄乱了我所有漂亮的布局！如果我用空格分隔 span 元素，则布局很好：

<span class="blablabla keepUnited">blabliblu1</span> <span class="blablabla keepUnited">blabliblu2</span> <span class="blablabla keepUnited">blabliblu3</span> <span class="blablabla keepUnited">blabliblu4</span>

如何插入这些空格？

【问题讨论】：

"我构建了一个 GWT Web HMI。在一个面板中，..." 什么样的面板？
一个流面板。这给了我一个 HTML div 元素。

标签： gwt html space

【解决方案1】：

扩展 FlowPanel 以便在小部件之间添加内联空间：

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.InlineHTML;
import com.google.gwt.user.client.ui.Widget;

public class MyFlowPanel extends FlowPanel {

  @Override
  public void add(Widget w) {
    if (w != null) {
      if (this.getWidgetCount() > 0) {
        super.add(new InlineHTML(" "));
      }
      super.add(w);
    }
  }

}

以与旧 FlowPanel 相同的方式使用新 FlowPanel：

public class MyMain implements EntryPoint {

  @Override
  public void onModuleLoad() {
    MyFlowPanel myFlowPanel = new MyFlowPanel();

    myFlowPanel.add(new CheckBox("Checkbox 1"));
    myFlowPanel.add(new CheckBox("Checkbox 2"));
    myFlowPanel.add(new CheckBox("Checkbox 3"));
    RootLayoutPanel.get().add(myFlowPanel);
  }

}

结果有空格（为了测试，我使用竖线'|'而不是空格''）：

不确定空格在 span 内的事实是否会破坏您的交易。真正的版本也应该重写方法 insert() 。另请注意，使用这种方法时，在检查小部件计数或迭代小部件列表时必须小心，因为 MyFlowPanel 会秘密注入 InlineHTML 小部件。因此，例如，添加两个复选框后，流程面板中有三个小部件。

如果您真的想变得花哨，可以向 MyFlowPanel 添加构造函数，在其中指定要在主要元素之间添加的“插页式”字符串、SafeHtml 或小部件。

【讨论】：

谢谢你，史蒂夫。我知道这不会插入一个孤独的空间，而是一个带有span shell 的空间。我曾想过手动插入像Labels 这样的内联元素。但这是一种解决方法，复杂且不优雅。所以我更喜欢一个干净的解决方案，但如果我没有找到一个，我会去解决这个问题。覆盖add 方法是个好主意，它消除了手动添加每个间隔元素的需要；这使得解决方法不那么复杂。

【解决方案2】：

HTML（和 GWT）不关心元素的配置。这是CSS的角色。

解决方案是使用 setStyleName 或 addStyleName 方法在每个 span 元素上放置一个简单的 CSS 类

之后，在你的 css 中：

margin-right: 4px;

当然，你可以将 4px 替换为你想要的值。

【讨论】：

HTML 关心空间。在后期制作中，我尝试了空间，我的布局得到了完美的展示。
在 span 元素上，我已经设置了 CSS 间距，例如边距和内边距。远远超过 4 个像素。这些间距出现了。美好的。但是span 元素之间没有空格打破了我漂亮的布局。在我使用 Firefox 查看的页面中，span 元素粘在一起。没有空格会禁止span 元素之间的软换行。但是我需要这样软的换行符，因为没有足够的宽度让大家一起！在两个 span 元素之间插入一个空格允许这样的换行 - 这就是我想要的。

【解决方案3】：

您可以在 span 元素上设置 float:left;，正如此 stackoverflow 答案中所建议的那样：Wrapping span tags inside a div 可能不是很完美，不要忘记在标签中添加clear:both，否则你的布局会中断。

【讨论】：

【解决方案4】：

您可以尝试运行这个简单的搜索和替换正则表达式

搜索：

</span><span

替换：

</span> <span

【讨论】：

怎么样？在哪里？我不编写 HTML 代码。我编写 Java 类，GWT（Google Web Toolkit）生成 HTML 食物。