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

我有两个输入，一个按钮和一个下拉菜单，我如何对齐它，使它彼此相邻。我已经为每个元素创建了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>

---

尝试以下代码：-

<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

标记

---

它正在工作。

看起来您正在使用引导。 因此，您可以使用行和列将其全部对齐

像这样：

  <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列。。因此，根据需要对齐的项目数量，您可以执行以下操作：

x 4以获得4列布局

---

删除所有div并生成一个div=>这是代码的直接复制粘贴，似乎工作正常：@NoobEditor您说过删除所有div并生成一个div，在您的示例中，input1类来自何处？@xec我的方法也适用于我，但日历图示符显示的值比输入值高一点。你知道为什么吗？请创建一个演示，显示确切的问题。IDLE显示我想要的东西，但当我使用此方法时，我会从网页的左侧到右侧获得长日历图示符和输入。这非常有趣，它将帮助我了解一些其他东西，所以我把col-md-4改成了col-md-1，所以我想要一个接一个的东西，但是在jsfiddle中，当我点击run时什么都没有发生为什么？试着点击update，看看。。或者给我链接：）col-md-12按我添加col-md-12并单击更新但未更改的方式给你一行12个小“框”-所以我想要的是左侧的日历徽标，后跟输入文本，填充3px；然后再次输入日历徽标和第二个输入。我将如何用cols来描述它。

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

  <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>