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>

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

现在，最简单，最新的方式是什么？（请在此模板中添加“style =”，我会将其正确添加到CSS中。）

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

我需要创建一个“新客户”表单，我希望能够将事物放在彼此旁边并创建更整洁的布局，而不是通常的每个字段的每个字段形式。

奖金问题：什么是最简单的方式让边框出现在一组小部件周围？有点优雅。

谢谢！

Merc的。

Answer 1

正如我在上面的评论中所发表的那样，我只是使用一张桌子，因为我觉得这对表格很好。但是，很多人不同意我的观点。

如果您想避开表格，可以将复选框放在＆lt; label＆gt; 中。您可以将控件绑定到标签，方法是使用 for 属性或将控件放在＆lt; label＆gt; 中。

请参阅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>

这应该将标签放在复选框的右侧，并将标签绑定到复选框。我还在标签上添加了一个边距，以便在密码字段和复选框之间创建空格。

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

1 个答案: