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

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

我猜你可以在 .row 上使用 float:left 或 display:inline-block (仅选择形式 ) 。两者都有效

请参阅下面的代码片段 display:inline-block

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>