在同一列上對齊表格輸入

在hr旁邊獲取分鐘的最佳方式是什麼？在同一列上對齊表格輸入

-I嘗試使用列和行，但它將所有內容都取消了。 - 我試過漂浮，但它使一切都錯位 - 我試過盒子，但類似的問題列和行。

非常感謝！ :)

<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()"> 

    {% csrf_token %} 
    <!-- change the form action to your script url --> 

<div class="row"> 
    <div class="col-xs-6"> 
     <p style="font-weight:bold">Start </p> 
     <p style="font-weight:bold">Hr </p> 
     <fieldset> 
      <input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}"> 
     </fieldset> 

     <p style="font-weight:bold">Min </p> 
     <fieldset> 
      <input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}"> 
     </fieldset> 
    </div> 


    <div class="col-xs-6"> 
     <p style="font-weight:bold">End </p> 
     <p style="font-weight:bold">Hr </p> 
     <fieldset> 
      <input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}"> 
     </fieldset> 

     <p style="font-weight:bold">Min </p> 
     <fieldset> 
      <input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}"> 
     </fieldset> 
    </div> 
</div> <!-- End all row --> 
</form>

來源

2017-04-26 user3314418

與此一替換代碼：

<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()"> 

    {% csrf_token %} 
    <!-- change the form action to your script url --> 

<div class="row"> 
    <div class="col-xs-6"> 
     <p style="font-weight:bold">Start </p> 
     <span style="font-weight:bold">Hr </span> 
     <fieldset style="display:inline-block"> 
      <input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}"> 
     </fieldset> 

     <span style="font-weight:bold">Min </span> 
     <fieldset style="display:inline-block"> 
      <input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}"> 
     </fieldset> 
    </div> 


    <div class="col-xs-6"> 
     <p style="font-weight:bold">End </p> 
     <span style="font-weight:bold">Hr </span> 
     <fieldset style="display:inline-block"> 
      <input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}"> 
     </fieldset> 

     <span style="font-weight:bold">Min </span> 
     <fieldset style="display:inline-block"> 
      <input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}"> 
     </fieldset> 
    </div> 
</div> <!-- End all row --> 
</form>

爲@Pyromonk提到p是塊元素，以便使用span代替

來源

2017-04-26 14:16:28

謝謝你，我欣賞的幫助！ – user3314418

歡迎隨時:) –

p是塊元素，所以是fieldset。 input是一個內聯元素。如果換行符是您面臨的問題，則應該考慮使用一組內聯元素，例如label和input。塊元素在自己和內聯元素之後強制執行換行符，簡單地說就是這樣。我絕對沒有理由在你的場景中使用fieldset和p，除非你絕對必須。如果這樣做，您可以嘗試將其顯示設置爲inline-block。

延伸閱讀：MDN :: Visual formatting model

來源

2017-04-26 14:05:46 Pyromonk

在同一列上對齊表格輸入

回答

相關問題