格式GWT移動ListPanel像一張表

Question

我在我的ui-binder中有下面的代碼。

<m:ListPanel selectable="false"> 
    <m:ListItem> 
    <g:Label ui:field="sortLabel"></g:Label> 
    <m:DropDownList ui:field="sortDropDown" /> 
    </m:ListItem> 
    <m:ListItem> 
    <g:Label ui:field="doneLabel"></g:Label> 
    <m:FlipSwitch ui:field="displayDone" value="false"/> 
    </m:ListItem> 
</m:ListPanel> 

我希望下拉列表和flipSwitch處於相同的垂直對齊方式。 目前在右側flipSwitch有點太多了。

Answer 1

不幸的是ListPanel本身（它從PanelBase延伸）不支持對齊。這可能只是一個疏忽。他們使用FlowPanel，它不能夠在沒有CSS黑客的情況下提供對齊來改變其結構。

爲了讓他們對齊，您可以：

• 使自己PanelBase是並通過代替FlowPanel _panel使用其他類型的面板支撐件對齊，然後讓你自己ListPanel從你的延伸新的PanelBase。可能是你最好的選擇。

OR

• 使用一些CSS魔法，像下面（但可能不完全）的東西。訣竅是FlowPanel使用塊佈局樣式，並且您需要將其設置爲內聯，以支持vertical-align CSS屬性。這可能會產生不可預見的影響，因此您可能還需要第一條路線。

.someStyle { 
    vertical-align:middle; 
    display:table-cell; 
}