将提交按钮和输入文本放在同一行

Question

我正在使用 Django 和 http://forms.viewflow.io/ 。

HTML：

<div>
    <form method='POST' action='' >
        <input type='hidden' name='csrfmiddlewaretoken' value='some value' />
        <div class="row">
            <div class="input-field col s12 required" id="id_email_container">
                <input id="id_email" maxlength="254" name="email" type="email">
                <label for="id_email">Email</label>
            </div>
        </div>
       <button type="submit" name="_submit" class="btn" value='Sign Up'>Submit</button>
    </form>
</div>

如何将提交按钮放在文本输入旁边？ 我再说一遍，我正在使用 DJANGO。

Answer 1

对于现在搜索此内容的任何人，crispy 有一个非常干净的解决方案，如果您还使用引导程序，则可以将按钮附加到输入字段。在您的 forms.py 中：

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout
from crispy_forms.bootstrap import FieldWithButtons, StrictButton
from django import forms

class FieldWithButtonForm(forms.Form):
    field_with_button = forms.CharField()
    
    def __init__(self, *args, **kwargs):
        super(FieldWithButtonForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            FieldWithButtons('field_with_button', StrictButton('Submit', type='submit', css_class='btn btn-primary'))

注意：如果您尝试使用此控件提交表单，则必须显式设置 type='submit' 否则按钮将呈现为 type='button'

更多关于清晰的布局here.

Answer 2

只需以下：

<div>
<form method='POST' action='' >
    <input type='hidden' name='csrfmiddlewaretoken' value='some value' />
    <div class="row">
        <div class="input-field col s12 required" id="id_email_container">
            <label for="id_email">Email</label>
            <input id="id_email" maxlength="254" name="email" type="email">
            <button type="submit" name="_submit" class="btn" value='Sign Up'>Submit</button>
        </div>
    </div>
</form>

我所做的只是重新排列你制作的线条。

Answer 3

我不确定你到底想要它在哪里，但你可以使用边距。

.row {
display: inline-block;
}

<div>
    <form method='POST' action='' >
        <input type='hidden' name='csrfmiddlewaretoken' value='some value' />
        <div class="row">
            <div class="input-field col s12 required" id="id_email_container">
                <input id="id_email" maxlength="254" name="email" type="email">
                <label for="id_email">Email</label>
            </div>
        </div>
       <button type="submit" name="_submit" class="btn" value='Sign Up'>Submit</button>
    </form>
</div>

Answer 4

我猜你可以在.row 上使用float:left 或display:inline-block（只选择表单内的特定行）。两者都有效

使用display:inline-block查看下面的sn-p

form > input + .row {
	display:inline-block
}

<div>
    <form method='POST' action='' >
        <input type='hidden' name='csrfmiddlewaretoken' value='some value' />
        <div class="row">
            <div class="input-field col s12 required" id="id_email_container">
                <input id="id_email" maxlength="254" name="email" type="email">
                <label for="id_email">Email</label>
            </div>
        </div>
       <button type="submit" name="_submit" class="btn" value='Sign Up'>Submit</button>
    </form>

Answer 5

您可以绝对定位按钮。我将输入更改为具有响应宽度，但如果它是设置宽度，那对您来说会更容易。让它离开：无论输入+标签的宽度是多少，都会加上一点额外的边距。

form button{
  position:absolute;
  left:80%;
  top:0;
}
#id_email{
  width:60%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">

     <form method='POST' action='' >

      <input type='hidden' name='csrfmiddlewaretoken' value='some value' />


<div class="row">
    <div class="input-field col-sm-12 required" id="id_email_container">
        <input id="id_email" maxlength="254" name="email" type="email">
        <label for="id_email">Email</label>

    </div>
</div>


       <button type="submit" name="_submit" class="btn" value='Sign Up'>Submit</button>

     </form>
</div>