把提交按鈕和輸入文本在同一行

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

我想你可以在.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>

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> 

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