asp.net - 水平对齐两个输入文本框和一个按钮

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 列..所以根据你想要多少对齐的元素，你可以这样做: <div class="col-md-3"></div> x 4 以获得 4 列布局

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