css - 如何将两个 dojo 小部件彼此对齐？

Question

警告，这可能是这里问过的最简单的问题。我有这样的表格:

  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-attach-point="loginPane" data-dojo-props="title: 'Login'">
    <div data-dojo-type="hotplate.hotDojoWidgets.AlertBar" data-dojo-attach-point="loginAlertBar"></div>
    <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
      <label for="${id}_login">Login</label>
      <input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
      <label for="${id}_password">Password</label>
      <input type="password" name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="hotplate.hotDojoAuth.ValidationPassword" />
      <input type="checkbox" name="remember" id="${id}_remember" data-dojo-attach-point="remember" data-dojo-type="dijit.form.CheckBox" />
      <label for="${id}_checkbox">Remember login</label>    
      <input type="submit" data-dojo-attach-point="loginButton" data-dojo-type="hotplate.hotDojoWidgets.BusyButton" label="Login!" />
    </form>
    <div data-dojo-attach-event="onclick:_onRecoverClick">Recover your password</div>
  </div>

这是一个非常基本的形式。现在，我想做的很简单:我只是希望“记住登录”标签位于复选框旁边。就如此容易。我还希望密码字段和复选框之间有更多空间。

现在，最简单、最简洁的方法是什么？ (请只在这个模板中添加“style=”，我会把它正确地添加到 CSS 中)。

我为复选框尝试了 display:inline。然而，它最终根本没有显示，因为 Dojo 似乎将它放在页面的最左侧(？)。

我需要创建一个“新客户”表单，我希望能够将事物并排放置并创建更整洁的布局，而不是通常的每行一个字段的表单。

红利问题:最简单让边框出现在一组小部件周围的方法是什么？一些优雅的东西。

谢谢!

雇佣兵。

Answer 1

如我在上面的评论中所述，我只使用表格，因为我认为这对于表格来说很好。然而，很多人会不同意我的看法。

如果您想避免表格，您可以将复选框放在 内。您可以将控件绑定(bind)到标签，方法是使用 for 属性或将控件放在 中。

• 参见 w3 tutorial on label use

因此，您可以更改:

<input
    type="checkbox" name="remember" id="${id}_remember"
    data-dojo-attach-point="remember"
    data-dojo-type="dijit.form.CheckBox" />
<label for="${id}_checkbox">Remember login</label>

到:

<label style="margin-left:10px">
    <input
        type="checkbox" name="remember"
        data-dojo-attach-point="remember"
        data-dojo-type="dijit.form.CheckBox"
    />Remember login
</label>

这应该将标签放在复选框的右侧，并将标签绑定(bind)到复选框。我还为标签添加了一个 margin-left，以便在您的密码字段和复选框之间创建空间。