如何使两个dojo小部件彼此相邻？ [英] How do I align two dojo widgets next to each other?

问题描述

警告，这可能是在这里问过的最简单的问题。
我有一个这样的形式：

Warning, this is possibly the easiest possible question ever asked here. I have a form like this:

  <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。就如此容易。
我还想在密码字段和复选框之间多一些空格。

It's a pretty basic form. Now, what I want to do is simple: I simply would like the label "Remember login" to be NEXT to the checkbox. As simple as that. I would also like a little more space between the password field and the checkbox.

现在，最简单的 neatest 这样做？ （请在此模板中添加style =，我会将其正确添加到CSS中。）

Now, what is the easiest, neatest way of doing this? (Please do it just adding "style=" within this template, I will add it to the CSS properly).

我尝试了 display：inline 复选框。但是，它最终不显示，因为Dojo似乎把它放在页面的左手边（？）。

I tried display:inline for the checkbox. However, it ends up not displaying at all, as Dojo seems to place it on the far left hand side of the page (?).

我需要创建一个新客户的形式，我很想能够把事情放在彼此旁边，并创建更整洁的布局，而不是通常的一字段每行形式。

I will need to create a "new customer" form, and I would love to be able to place things next to each other and create neater layouts, rather than the usual one-field-per-line form.

奖励问题：在一组小部件周围显示边框的方式是什么？最简单的方法是什么？非常优雅。

BONUS QUESTION: what's the easiest way to get a border to appear around a group of widgets? Something classy.

谢谢！

Merc。

推荐答案

如我在上面的评论中所述，我只是使用一个表，因为我认为这是罚款的形式。

As posted in my comment above, I'd just use a table as I think this is fine for a form. However, many people would disagree with me.

如果您想要避开表格，可以将该复选框放在< label> 下。您可以使用属性将控件绑定到标签，也可以将控件放置在< label> 中。

If you want to avoid tables you could place the checkbox inside the <label>. You can bind a control to a label, either by using the for attribute or placing the control inside the <label>.

• 请参阅 w3标签使用教程

因此，您可以更改：

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

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

This should place the label to the right of the checkbox and bind the label to the checkbox. I've also, added a margin-left to the label so that space is created between your password field and the checkbox.

这篇关于如何使两个dojo小部件彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！