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

您可以绝对定位按钮。我将输入更改为具有响应宽度，但如果它是设置宽度，则对您来说更容易。向左移动：输入+标签的宽度加上一点额外的余量。

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>

Answer 2

我猜您可以在float:left上使用display:inline-block或.row（仅选择表单中的特定行）。他们都工作

使用display:inline-block

查看下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

只需以下内容：

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

对于现在搜索此内容的任何人，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.

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

5 个答案: