一行上的线元素

Question

我试图获取搜索栏，日期图标的日期输入以及搜索按钮全部在div中居中。到目前为止，我只把它集中在div中。但出于某种原因，我无法排好并且发生这种情况：

<div class="input-group input-group-lg center">
            <div class="input-group">
            <input type="text" class="form-control searchbar" placeholder="Search for...">
              <div class="input-group date">
                <input type="text" class="form-control date" value="12-02-2012">
                <div class="input-group-addon calender-icon">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
              </div>

            <span class="input-group-btn">
              <button class="btn btn-default search_icon" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
            </span>
          </div>

这是css

.calender-icon {
  border-radius: 0px !important;
 }
.date {

  height: 50px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;

}
.search_icon {
  background-color: darkgrey;
  height: 50px !important;
  width: 50px !important;
}


.searchbar {
  width:70%;
  margin: 20px 30px;
  height: 50px !important;
  border-bottom-left-radius: 30px !important;
  border-top-left-radius: 30px !important;

.center {
  margin: auto !important;
}

不确定为什么会这样。到目前为止，我尝试过不同的造型，但都失败了。

Answer 1

如果你把“float：left;”在每个规范中，它应该把它们放在同一行。

.calender-icon {
    float: left;
    ...
}
.date {
    float: left;
}
.searchbar {
    float: left;
    ...
}
...

然后，确保使用闭合的大括号正确关闭.searchbar。