生成的HTML元素之間的空格

我遇到了一個問題，簡單但愚蠢地阻止。生成的HTML元素之間的空格

我構建了一個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>

如何插入這些空間？

來源

2011-09-20 Nicolas Barbulesco

「我構建了一個GWT Web HMI，在一個面板中......」什麼樣的面板？ –

一個FlowPanel。這給了我一個HTML'div'元素。 –

-2

你可以嘗試運行這個簡單的搜索&替換正則表達式

搜索：

</span><span

取代：

</span> <span

來源

2011-09-20 16:06:12 sethportman

如何？在哪裏？我不寫HTML代碼。我編寫Java類，GWT（Google Web Toolkit）生成HTML食物。 –

的HTML（和GWT）不關心的配置你的元素。這是CSS的作用。

一個解決辦法，是把一個簡單的CSS類與setStyleName或addStyleName方法

之後每跨元素上，在你的CSS：

margin-right: 4px;

當然，你也可以更換4PX由你想要的價值。

來源

2011-09-20 16:22:24

HTML關心的是空間。在後期製作中，我嘗試了空間，並且我的佈局完美展現。 –

在'span'元素上，我已經放置了CSS間距，如邊距和填充。多於4個像素。這些間距出現了。精細。但'span'元素之間沒有空格會打破我美麗的佈局。在我使用Firefox查看的頁面中，'span'元素被粘在一起。沒有空間禁止'span'元素之間的軟線斷裂。但是我需要這樣的軟線休息，因爲每個人都沒有足夠的寬度！在兩個'span'元素之間插入一個空格允許這樣的換行符 - 這正是我想要的。 –

你可以做的是設置float:left;上跨度元素，在這個計算器的答案提示：Wrapping span tags inside a div 這也許不是完美的，不要忘了在跨度後的標籤添加clear:both，否則佈局將打破。

來源

2011-09-20 18:56:49

擴展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); 
    } 

}

結果有空格（測試，我用豎線 '|'，而不是一個空格'「）：

enter image description here

不確定空間是否在內部的事實對您來說是一種破壞行爲。真正的版本應該重寫insert（）方法。另外請注意，使用這種方法時，在檢查小部件計數或迭代窗口小部件列表時必須小心，因爲MyFlowPanel正在祕密注入InlineHTML小部件。因此，在添加了兩個複選框之後，流程面板中有三個小部件。

如果你真的想要看起來，你可以添加構造函數到MyFlowPanel，在其中指定你想要的主要元素之間添加的「interstitial」字符串，SafeHtml或Widget。

來源

2011-09-20 19:22:31

謝謝，史蒂夫。據我所知，這不會插入一個寂靜的空間，而是一個帶有'span'外殼的空間。我曾想過插入像'Labels'這樣的手動內聯元素。但這是一個解決方法，複雜而不優雅。所以我更喜歡一個乾淨的解決方案，但是如果我找不到一個解決方案，我會採取這種解決方法。覆蓋'add'方法是一個好主意，它抑制了手動添加每個間隔元素的需要;這使得解決方法更簡單。 –

生成的HTML元素之間的空格

回答

相關問題