标签和文本字段在同一行答案

【问题标题】：label and text field on same line标签和文本字段在同一行
【发布时间】：2020-06-25 23:54:56
【问题描述】：

有人可以看一下示例并帮助我制作标签和输入字段吗？目前它是标签并在其下方输入字段。我需要标签：输入字段。

    <div class="row">
        <div class="col-xs-6">
                    <div class="panel panel-primary">
                         <div class="panel-heading"><h3 class="panel-title">Application Information</h3></div>
                         <div class="panel-body">

                                <div class="row">
                                <div class="col-lg-6 col-lg-6">
                                   <div class ="form-group">
                                        <label for="text" >Contract State</label>       
                                        <div class="input-group">    
                                            <select name="State" id="State" class="validate[required] form-control">
                                            <option value="">Choose a State</option>                    
                                            <option value="IL">Illinois</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="WI">Wisconsin</option>
                                            </select>                                                       
                                        </div>
                                    </div>

                                    <div class ="form-group">
                                        <label for="text" >Application Number</label>       
                                         <div class="input-group">   
                                        <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
                                        </div>   
                                    </div>                                      


                             </div> <!-- col-lg-6 col close -->
                            </div> <!-- row close -->
                         </div> <!--  End of panel Body -->     
                    </div><!--  End of panel  -->       
                </div> <!-- end col-xs-6 -->

如何将标签向右对齐，控件向左对齐，中间有边距？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

在标签中添加类并赋予样式：向左浮动

<div class ="form-group">
     <label for="text" style="float:left;margin-right:5px;">Application Number</label>       
     <div class="input-group">   
     <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
     </div>   
     </div>

【讨论】：

这个解决方案有帮助。谢谢你！。有没有办法我可以将它应用于整个
或
所以它下面的所有表单组都将遵循相同的标签：输入模式?
是的，您可以在由空格分隔的 div 中提供更多类，例如
对不起。我不太明白你的回答。我的意思是问如果我希望下拉和输入都应该在同一行上有标签和表单控件，那么我们可以在行或列级别应用这种格式，而不是对单个 div 应用这种格式吗？谢谢！
检查这个jsfiddle.net/dUG4f/10我猜你想要这样，如果它对你有帮助，请接受答案。
酷！这就是我需要的谢谢。

【解决方案2】：

只需将您的表单组包装在 form-inline 类中，如下所示：

<form class="form-inline">
  <div class ="form-group">
    <label for="text" >Application Number</label>       
      <div class="input-group">   
        <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
      </div>   
  </div>
</form>

附： form-inline 包装器不一定需要是 form 标记，因此您也可以使用 div 标记。

【讨论】：

【解决方案3】：

您有多种解决方案。例如：

<div style="width: 200px; float: left;">
    <label for="text">Application Number:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div>

对于多行，可以是这样的：

<div style="width: 200px; float: left;">
    <label for="text">Field 1:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

<div style="width: 200px; float: left;">
    <label for="text">Field 2:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

<div style="width: 200px; float: left;">
    <label for="text">Field 3:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

【讨论】：

我们可以在一个输入字段中有两个类吗？
我已经尝试了这两种解决方案，但都没有奏效。你能看看JSfiddle吗？谢谢！
对不起，我没有看到你有一个“类”元素
谢谢！无论如何我可以在行或列级别应用此模式，以便所有表单组都遵循它？
或
@user2088016，如果我们的回答对您有用，请不要忘记验证它们;-)，非常感谢！