css - GWT:帮助尝试格式化复合小部件。试过 CSS 的东西，但没有效果

Question

考虑以下小部件:

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.FlexTable;

public class SelectorPanel extends Composite
{
    private final FlexTable flexTable = new FlexTable();
    private final Label lbltitle = new Label("##Title");
    private final ListBox listBox = new ListBox();
    private final Label lblsearchtext = new Label( "##SearchText" );
    private final TextBox tbSearch = new TextBox();

    public SelectorPanel()
    {
        listBox.setVisibleItemCount( 10 );
        flexTable.setStyleName("SearchPanel");
        flexTable.setBorderWidth(0);

        initWidget( flexTable );
        flexTable.setSize("200px", "0px");
        lbltitle.setWordWrap( false );

        flexTable.setWidget( 0, 0, lbltitle );

        flexTable.setWidget( 1, 0, listBox );
        listBox.setWidth("100%");

        flexTable.setWidget( 2, 0, lblsearchtext );
        tbSearch.setMaxLength( 32 );

        flexTable.setWidget( 3, 0, tbSearch );
        flexTable.getCellFormatter().setHorizontalAlignment( 0, 0, HasHorizontalAlignment.ALIGN_LEFT );
        flexTable.getCellFormatter().setVerticalAlignment( 2, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment( 1, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment( 3, 0, HasVerticalAlignment.ALIGN_MIDDLE );
        flexTable.getCellFormatter().setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
        flexTable.getCellFormatter().setHorizontalAlignment(3, 0, HasHorizontalAlignment.ALIGN_CENTER);
    }

}

我试过弄乱 CSS 间距和填充(我不知道有什么区别)但没有效果。我什至可以在 CSS 工具中更改颜色，但这也没有效果。

无论如何，这是小部件的问题:

1. 标题文本“##Title”被其下方的列表框截断。我希望在它下面有一些间距或填充，这样就不会发生这种情况。

2. ##SearchText 标签离它上面的列表框太近，并且还被它下面的文本框重叠。

3. 最后整个东西出现在我的浏览器的最左边，我希望它和屏幕边缘之间有一点间距。

我可以通过调整单元格大小来“某种程度上”格式化它。我无法做到正确，只有更好。我还认为这一定是错误的方法。

当我查看 stockwatcher 应用程序时，他们使用 CSS 来做这样的事情，但我什么也做不了。以下是我的 CSS 文件，这两项只是实验性的，对任何东西都没有影响。

Boxed {
    margin-top: auto;
    border: thin solid;
    background-color: Silver;
}
#test {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

有谁能给我解释一下吗？就是不明白为什么CSS没有效果，或者怎么解决上面的问题。我可以将上述 CSS 应用于单元格或标签或其他 UI 对象，但没有任何反应。

Answer 1

首先，我看不到您的重叠问题。看图片。这对我来说看起来不错:

对于 CSS 问题:您需要引用组件的类名或 ID。类由“.className”引用，id 由“#id”引用。

如果您想将小部件向左移动 100 像素，您可以使用此 CSS:

.SearchPanel{ margin-left:100px; }

或者您甚至可以将其居中:

.SearchPanel{ margin:auto; }

您在代码中应用了 css 类“SearchPanel”:

flexTable.setStyleName("SearchPanel");

这样您就可以将类应用于每个组件。

如果您不想在标签的顶部和底部留出更多间距(##Title 和##SearchText)，您也可以添加一些边距:

.gwt-Label { 
   margin-top: 10px;
   margin-bottom: 10px;
}