如何使两列格式相同的页面？ [复制]

Posted 2023-02-24

【中文标题】如何使两列格式相同的页面？ [复制]

【英文标题】：How to make two column fom at same page? [duplicate]

【发布时间】：2013-08-04 10:16:20

【问题描述】：

谁能帮我在同一页面上垂直制作两列表单。我也附上了编码。我的问题是如何在 form.py 中编写两个表单以及如何在模板中进行更改（登录.html) 使 2 个表单显示为两列？请帮帮我.. 提前致谢！

class Login(AuthenticationForm):

    region = forms.ChoiceField(label=_("Region"), required=False)

    username = forms.CharField(label=_("User Name"))
    password = forms.CharField(l![enter image description here][2]abel=_("Password"),
                               widget=forms.PasswordInput(render_value=False))
    t= [('http:google.com','Google'),('http://kent.com','University of Kent')]
    FederatedLogin = forms.ChoiceField(label= _("Select one of the third party "),choices= t)
    tenant = forms.CharField(required=False, widget=forms.HiddenInput())


login.html



% extends "horizon/common/_modal_form.html" %

% load i18n %
% load url from future %

% block modal-header %
% trans "Log In" %
% endblock %
% block modal_class %
login 
% if hide %
modal hide
% endif %
% endblock %

% block form_action %% url 'login' %% endblock %
% block autocomplete % HORIZON_CONFIG.password_autocomplete % endblock %

% block modal-body %
  <fieldset>
    % if request.user.is_authenticated and 'next' in request.GET %
    <div class="control-group clearfix error">
      <span class="help-inline"><p>% trans "You don't have permissions to access:" %</p>
        <p><b> request.GET.next </b></p>
        <p>% trans "Login as different user or go back to" %
        <a href="% url 'horizon:user_home' %">% trans "home page" %</a></p>
      </span>
    </div>
    % endif %
    % if next %<input type="hidden" name=" redirect_field_name " value=" next " />% endif %
    % include "horizon/common/_form_fields.html" %
  </fieldset>
% endblock %


% block modal-footer %
  <button type="submit" class="btn btn-primary pull-right">% trans "Sign In" %</button>

% endblock %

【参考方案1】：

我不会在 python 中编写代码，但这听起来像是一个带有 css 答案的问题。如果您将每个表单放在自己的 DIV 中并为每个表单（两个不同的或一个共享的）分配一个类，并将 css 浮点设置为“左”，它们应该彼此相邻排列。

需要注意两点：如果任一 DIV 太宽，则第二个表单不会拉到第一个表单的右侧。也许用 % 值宽度格式化它们会保护您免受该选项的影响。其次，您可能需要在第二种形式之后的 DOM 中的下一个对象上将 float 显式设置为 none。我不知道 CSS3 是否不再需要“重置”。