如何实现这种布局？

Question

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

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

Answer 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;}

Answer 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%;
}

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

Answer 3

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

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

Answer 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)是你的朋友。

Answer 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>

Answer 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/

Answer 7

http://jsfiddle.net/9uFfN/31/你走了！只需使用position：absolute并测试：）