1

考虑以下小部件：

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 对象，但没有任何反应。

4

1 回答 1

0

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

在此处输入图像描述

对于 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;
}
于 2013-05-09T16:48:12.593 回答