css - 如何使用 GWT 2.4 对带边框的小部件进行垂直布局？

Question

我正在使用 GWT 2.4 和 uiBinder。

我试图让页面中心的一组小部件与单个外边框垂直对齐。我认为这会相当容易，但我需要在页面中心使用垂直布局来对齐小部件。

小部件使用垂直面板按我想要的方式排列，但没有可用的边框选项，除非我想使用 borderwidth 属性在每个元素周围放置边框。

这是 uiBinder 代码:

<g:HTMLPanel ui:field="mainPanel">
         <g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
                        <g:Label ui:field="titleLabel"></g:Label>
                        <g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
                        <g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>

                        <g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
                        <g:FileUpload ui:field="fileUpload"></g:FileUpload>
                        </g:FormPanel>

                        <g:Label ui:field="Label" text="Please select:"></g:Label> 

                        <g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'> 
                            <g:item value="-1">-- Please select item(s) below: --</g:item>
                        </g:ListBox>

                        <g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button> 

                        <g:HorizontalPanel ui:field="horizontalPanel"  styleName="{style.spacer-top}">
                            <g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
                                <g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}"  text="Cancel"></g:Button>
                            </g:cell>
                            <g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
                                <g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
                            </g:cell>                   
                        </g:HorizontalPanel>
                </g:VerticalPanel>
    </g:HTMLPanel>

我是不是设计错了，我的意思是使用错误的面板来实现我想要做的事情？

Answer 1

您可以为 verticalpanel 的 borderwidth 设置边框，这样所有添加到它的小部件都会显示为好像它有边框一样。