生成的 HTML 元素之间的空格

Question

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

我构建了一个 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>

如何插入这些空格？

Answer 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);
  }

}

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

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

如果您确实想要变得更奇特，您可以向 MyFlowPanel 添加构造函数，在其中指定要在主要元素之间添加的“插页式”字符串、SafeHtml 或 Widget。

Answer 2

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

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

之后，在您的 css 中：

margin-right: 4px;

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

Answer 3

您可以做的是在 span 元素上设置 float:left; ，如以下 stackoverflow 答案中所建议：将 span 标签包裹在 div 内
它可能并不完美，并且不要忘记在跨度后面的标记中添加 clear:both ，否则布局将会中断。

Answer 4

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

搜索：

</span><span

替换：

</span> <span