如何实现这种布局？答案

【问题标题】：How to achieve this layout?如何实现这种布局？
【发布时间】：2011-03-21 20:59:37
【问题描述】：

我想基本上创建这种布局：

实现这一目标的最佳方法是什么？

【问题讨论】：

我认为您应该更清楚地说明您需要特定于 UiBinder GWT 的解决方案，而不是简单的 html 标记。
我的意思是，标签是您在这里唯一的提示。毫无疑问，回答者会不高兴。

【解决方案1】：

您的 HTML：

<div id="login">
    <div class="float_left">
      Your input here <br/>
       Your remember me checkbox and text
    </div>
    <div class="float_left">
      Your second input here <br/>
      And then your forget password link
    </div>
    <div class="float_left">
      Login button here
    </div>
    <br style="clear:both;"/>
</div>

你的 CSS：

#login {}
.float_left {float:left;}

【讨论】：

我不认为这是“最好的”方式。
f$#@ 这个愚蠢的问题。我再也不会回答 noob html/css 问题了。每个人都投了反对票，甚至我的，检查的答案。
@rsplak |在有人在我们都喜欢的愚蠢的 q/a 网站上发脾气后，我猜会出现大量的反对票。
我不理解反对意见，但我确实认为将整个表单包含在一个 div 中，使用 brs 而不是正确的样式并命名一个类“float_left”是一种次优，从代码风格立场。
这个问题完全是菜鸟材料，但你会怎么做呢？

【解决方案2】：

这是语义上干净的方法：

HTML：

<form>
  <fieldset>
    <input id="username" placeholder="user name">
    <label><input id="rememberme" type="checkbox"> Remember me</label>
  </fieldset>
  <fieldset>
    <input id="password" type="password" placeholder="password">
    <a href="forgotpassword.html">Forgot your password?</a>
  </fieldset>
  <input type="submit" value="Login">
</form>

CSS：

fieldset { 
  display: block;
  float: left;
  margin-right: 8px;
}

#username, #password {
  display: block;
  width: 100%;
}

或者类似的东西。我会使用标签而不是占位符，但是你的模型中没有任何标签，所以我不想添加额外的元素。

【讨论】：

【解决方案3】：

“最好的方法”是使用flexible box model（display: box，如果你有一些特定的大小可以分配给块以便它们对齐）或表格布局（display: table）。不幸的是，Internet Explorer 6 和 7 绝对有no support for any of them。所以我会选择任何一个（因为这个问题是面向 GWT 的）：

HTMLPanel 中的普通旧 <table>（并使用 role=presentation 以获得最佳可访问性）
FlexTable 或 Grid 小部件（由 table 支持）

【讨论】：

【解决方案4】：

看，我已将 Sam 上面的答案转换为 UI:Binder 模板。（可能有错误，我这里是手动写XML的。）

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .float_left {float:left;}
  </ui:style>

  <g:HTMLPanel>
    <g:HTMLPanel class='{style.float_left}'>
      <g:TextBox ui:field='loginTextBox'/>
      <br/>
      <g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
    </g:HTMLPanel>
    <g:FlowPanel class='{style.float_left}'>
      <g:PasswordTextBox ui:field='passwordTextBox'/>
      <br/>
      <g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
    </g:FlowPanel>
    <g:FlowPanel class='{style.float_left}'>
      <g:Button ui:field='loginButton' text='Login'>Login</g:Button>
    </g:FlowPanel>
    <br style="clear:both;"/>
  </g:HTMLPanel>
</ui:UiBinder>

以及对应的Java类。这应该不足为奇 - @UiField 和 uiBinder.createAndBindUi(this) 是你的朋友。

【讨论】：

【解决方案5】：

我知道这听起来可能很糟糕，但我认为在这种情况下表格是最好的选择：

<table style="border: none;" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input name="login" />
    </td>
    <td>
      <input name="password" type="password" />
    </td>
    <td>
      <input name="login" type="submit" value="Login" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="keepMeLogged">
      <label for="keepMeLogged">Keep me logged in</label>
    </td>
    <td>
      <a href="forgot.php">Forgot your password?</a>
    </td>
    <td>
      &nbsp;
    </td>
  </tr>
</table>

【讨论】：

Facebook 似乎也在使用这种方法。

【解决方案6】：

CSS

input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }

HTML

<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
<a href="#">Forgot your password?</a>

现场观看：http://jsfiddle.net/foghina/92E2a/

【讨论】：