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

我正在使用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。

来源

2017-06-20 uitwaa

你可以改变这种形式的布局，或者这是默认布局，你只能添加CSS？ –

@PaigeMeinke这是默认布局。 – uitwaa

您可以绝对地定位按钮。我改变了输入的响应宽度，但如果它是一个设定的宽度，那对你来说会更容易。将其留下：无论输入+标签的宽度多加一点余量。

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>

来源

2017-06-20 13:17:07

我想你可以在.row使用float:left或display:inline-block（仅选择表单内的特定行）。他们两人的工作

见片段下面display:inline-block

form > input + .row { 
 
\t 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>

来源

2017-06-20 13:18:35

我不知道，你想让它完全是，但你可以同裕发挥。

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

来源

2017-06-20 13:18:50 Gerard

随着只需以下：

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

我所做的只是重新安排你做的线。

来源

2017-06-20 13:18:59 jukerok

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

回答

相关问题