How to achieve this layout?

I want to basically create this kind of layout:

What w开发者_JAVA技巧ould be the best way to achieve this?

---

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

Your CSS:

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

---

Here's the semantically clean way to do it:

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

The CSS:

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

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

Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.

---

The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them. So I'd go with either (as this question is GWT-oriented):

• a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
• FlexTable or Grid widget (which are backed by a table)

---

Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)

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

And the corresponding Java class. That should go with no surprise - @UiField and uiBinder.createAndBindUi(this) are your friends there.

---

I know it may sound bad, but I think tables is the best way to go in this case:

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

---

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>

See it live: http://jsfiddle.net/foghina/92E2a/