Question

我有两个输入，一个按钮和一个下拉菜单，如何对齐它以使它彼此相邻。我已经为每个元素创建了div，但事情看起来不对。这就是我所做的：

<div class="class1">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
    </div>
    <div class="input1" >
        <input type="text" value="" class="form-control" id="deatPicker1">
    </div>
    <div class="class1" >
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
    </div>
    <div class="input1">
        <input type="text" value="" class="form-control" id="deatPicker2">
    </div>

<div class="button" style="display: inline-block;">
    <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search">    </i></button>
</div>

我的Css：在这个过程中我注意到上面的例子工作正常，但是如果我创建另一个网页，如果我使用我当前的网页，那么事情不会保持我想要的方式

 .class1{
    display: inline-block;
    width: 15px;
  }
 .input1{
    display: inline-block;
    width: 200px;
    padding-left: 20px;
  }

Answer 1

看起来你正在使用bootstrap。所以你可以使用行和列来对齐它们。

像这样：

  <div class="row class1">
        <div class="col-md-4">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
            <input type="text" value="" class="form-control" id="deatPicker1">
        </div>
        <div class="col-md-4">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
            <input type="text" value="" class="form-control" id="deatPicker2">
        </div>

         <div class="col-md-4">
        <button type="submit" class="btn btn-default">
        <i class="glyphicon glyphicon-search"></i>Search</button>
            </div>            
</div>

一行最多可提供12个col ..所以根据您想要的对齐项目数量，您可以执行以下操作： <div class="col-md-3"></div> x 4获得4 col布局

http://jsfiddle.net/mT6VV/7/

Answer 2

试用此代码： -

<div class="class1">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
</div>
<div class="input1" >
    <input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>    </span>
</div>
<div class="input1">
    <input type="text" value="" class="form-control" id="deatPicker2">
</div>

使用此Css：

.class1 {
       display: inline-block;
   }
   .input1 {
       display: inline-block;
       width: 200px;
       padding-left: 20px;
   }
   button {
       width:90px;
       height:20px;
   }

您无需在设计源中添加额外的div标记。

Demo For Alignment 它正在发挥作用。

水平对齐两个输入文本框和一个按钮

2 个答案: