Question

我试图将下拉框和输入框放在同一行。但是，输入框保持浮动到底部。 floating boxs image

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   
    </div>

    <div class="col-xs-2">
        <input type="value" class="form-control" id="val">
    </div>  

</div>

Answer 1

只需用此

替换您的代码即可

<div style="margin-left: 2%; font-size:10";>
 <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
<div class=".col1" style="float: left;">         
<select class="selectpicker" >
            <option>USA</option>
            <option>CA</option>                     
        </select>

<select class="selectpicker">                   
            <option>=</option>
            <option>></option>  
            <option><</option>                          
            <option>>=</option> 
            <option><=</option>                 
        </select>   
</div>

<div class="col-xs-2" style="float:left;">
    <input type="value" class="form-control" id="val">
</div>

Answer 2

Here the solution
To put the drop down boxes and the input box on the same line

＆＃13;

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   
    

        <input type="value" class="form-control" id="val">
</div>

</div>

＆＃13;

Answer 3

我在select和input字段周围添加了一个包装器，并将其显示为flexbox。我还用类col1更正了div。你在课程名称前面有一个点。

＆＃13;

.wrapper {
  display: flex;
  align-items: center;
}

.form-control {
  margin-left: .2em;
}

＆＃13;

<div style="margin-left: 2%; font-size:10" ;>
  <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>
  <div class="wrapper">
    <div class="col1">
      <select class="selectpicker">
                <option>USA</option>
                <option>CA</option>                     
            </select>

      <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>
    </div>

    <div class="col-xs-2">
      <input type="value" class="form-control" id="val">
    </div>
  </div>
</div>

＆＃13;

Answer 4

你在这里

<div class="col-lg-6">
     <div class="col-lg-12">
         <div class="row">
            <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1> 
            <div class="col-lg-6">
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="row">
                        <select class="selectpicker form-control" >
                        <option>USA</option>
                        <option>CA</option>                     
                        </select>
                    </div>
                </div>
            </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                            <select class="selectpicker form-control">                   
                            <option>=</option>
                            <option>></option>  
                            <option><</option>                          
                            <option>>=</option> 
                            <option><=</option>                 
                            </select> 
                        </div>
                    </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="col-lg-12">
         <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                        <input type="value" class="form-control" id="val"> 
                        </div>
                    </div>
                </div>
             </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="row">
                         <button type="submit"  name="submit"  class="btn btn-primary btn-md" > submit </button>
                         </div>
                    </div>
                </div>
             </div>
         </div>
     </div>
</div>

Answer 5

select{width:49.5%;    height: 31px;
    border: 1px solid #ccc;
    border-radius: 3px;}
    input{height:31px !important;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-left: 2%; font-size:10";>
 <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
<div class="col-xs-8" style="padding-right:0px;">         
<select class="selectpicker" >
            <option>USA</option>
            <option>CA</option>                     
        </select>
<select class="selectpicker">                   
            <option>=</option>
            <option>></option>  
            <option><</option>                          
            <option>>=</option> 
            <option><=</option>                 
        </select>   
</div>
<div class="col-xs-4" style="padding-left:0px;">
    <input type="value" class="form-control" id="val">
</div>

Answer 6

这是因为您使用的是bootstrap col-xs类，它将输入标记移动到新行。要解决此问题，只需移动上部div中的输入字段，如下所示：

<div style="margin-left: 2%; font-size:10";>
     <h1 style="font-size:15px;color:#343538">Geographical Constraint</h1>     
    <div class=".col1">         
    <select class="selectpicker" >
                <option>USA</option>
                <option>CA</option>                     
            </select>

    <select class="selectpicker">                   
                <option>=</option>
                <option>></option>  
                <option><</option>                          
                <option>>=</option> 
                <option><=</option>                 
            </select>   


        <input type="value" class="form-control" id="val">
</div>

</div>

如何操纵输入框的位置？

6 个答案: