在同一列上对齐表格输入

在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

在同一列上对齐表格输入

回答

相关问题