生成的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中添加构造函数，在其中指定要在主要元素之间添加的“interstitial”字符串，SafeHtml或Widget。

Answer 2

HTML（和GWT）并不关心元素的处理方式。这是CSS的作用。

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

之后，在你的CSS中：

margin-right: 4px;

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

Answer 3

您可以执行的操作是在span元素上设置float:left;，如此stackoverflow答案中所述：Wrapping span tags inside a div 它可能并不完美，不要忘记在跨度后在标签中添加clear:both，否则布局将会中断。

Answer 4

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

搜索：

</span><span

取代：

</span> <span