我正在尝试在 Google 的 Web Toolkit 中寻找出路。所以我想制作一个 100% 高度和 100% 宽度布局的小页面。我不想要边距、填充和滚动条。
我使用了 DockPanel 并将其添加到页面中，如下所示:
package de.kuntze.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
public class BeginningGWT_BookExample implements EntryPoint {
public void onModuleLoad() {
DockPanel mainPanel = new DockPanel();
mainPanel.setBorderWidth(5);
mainPanel.setSize("100%", "100%");
mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
Widget header = new Label("Header");
mainPanel.add(header, DockPanel.NORTH);
mainPanel.setCellHeight(header, "30px");
Widget footer = new Label("Footer");
mainPanel.add(footer, DockPanel.SOUTH);
mainPanel.setCellHeight(footer, "25px");
Widget categories = new Label("Categories");
mainPanel.add(categories, DockPanel.WEST);
mainPanel.setCellWidth(categories, "150px");
mainPanel.setCellHeight(categories, "500px");
Widget tasks = new Label("Tasks");
mainPanel.add(tasks, DockPanel.EAST);
RootPanel.get().add(mainPanel);
}
}
我还添加了一些 CSS 代码来配置 html 和 body 标签:
* {
margin: 0px;
padding: 0px;
border: 1px solid black;
}
html, body{
height: 100%;
width: 100%;
min-height: 100%;
}
我使用的 html 页面如下所示:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="BeginningGWT_BookExample.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="beginninggwt_bookexample/beginninggwt_bookexample.nocache.js"></script>
</head>
<body>
</body>
</html>
所以我的问题来了:在编译的网页中，左侧有 5-10 像素(估计)的边距，我无法解释或消除。我通过chrome和firefox看了一下，结果都是一样的。我怎样才能摆脱左边的额外间距？我想要一个 100% 填充的网站。
提前感谢任何答案
安德烈
P.S.:我故意没有使用 UI Binder，因为我现在需要学会不用它。所以请不要就此展开讨论。谢谢;-)
最佳答案
10px 的边距来自 clean.css，它是应用的 Clean 主题的一部分。
您可以从模块配置文件中将此主题更改为标准主题。
只是删除或评论
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
并添加
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
这样做会消除边距。
否则您显然也可以覆盖您的 css 中的样式。 所以在body style中也要加上“margin 0px !important;”
html, body{
height: 100%;
width: 100%;
min-height: 100%;
margin 0px !important
}
关于java - GWT 布局 : How would I fix this layout (DockPanel)?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12254614/