html - 如何在水平布局中放置 4 个可调整大小的 div？

Question

我必须实现具有以下布局的搜索功能:

[搜索输入(点击搜索图标可见)] SearchIcon ClearIcon RefreshIcon

所有这些都是水平布局的一部分。

我将搜索输入和图标组合在一个指令中(称为 my-search)。由于我无法在这里解释清楚的原因，刷新不是指令的一部分。

这是我的指令的 HTML(模板)，包括搜索文本和图标:

<div class="my-search">
    <input class="search"
           type="search"
           placeholder="{{placeholder}}"
           ng-model="model"
           ng-change="onSearchTextChange(model)"
           ng-show="click"               
           ng-init="click=false"
            />
    <div class="circle main-icon" ng-click="click=true">
        <div class="fa fa-search internal-icon"></div>
    </div>

</div> 

这是CSS:

.my-search {
    float: left;
    position: relative;
    box-shadow: none;
    height: 0;
}
.my-search .search{
    float: left;
    display: inline-block;
    width: 25rem;
    height: 3rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    background-color:transparent ;
    font-size: 1.8rem;
    border-radius: 0;
    position: relative;
}

.my-search .circle{
    width: 3rem;
    height: 3rem;
}
.my-search .main-icon{
    float: right;
    position: relative;
    background-color:transparent ;
    border: 2px solid #018BD3;
    padding-top:5px !important;
    left: -34px;
    transition-delay: 0.5s;
}

.my-search .main-icon .internal-icon{
    position: absolute;
    color:#018BD3;
    width: 3rem;
    margin-top: 1px;
    margin-left: 7px ;
}

搜索输入和图标正确对齐，但是当我将指令与清除和刷新结合使用时，当输入可见时，清除和刷新图标会添加到文本输入的右侧(而不是搜索图标)。

这是我在水平布局中获得所有四个的东西:

<div class="container">
    <my-search> model="model" placeholder="placeholder" </my-search>
       <div>
            <div class="fa fa-bell"></div>
       </div>
       <div>
            <div class="fa fa-bars"></div>
       </div>
 </div>

问题是当输入显示在左侧时，铃铛(清除)和条形(刷新)div 都出现在输入的右侧，而不是搜索图标。

.container{
float: right;
  padding-right: 30px;
}

我认为问题出在某种程度上，当搜索 div 调整大小时显示输入时，相对于搜索图标而言整体 float 出现。知道我怎样才能做到这一点吗？

Answer 1

以下 CSS 使您的搜索图标移动到右侧:

.my-search .main-icon{
    float: right;
...}

如果您删除搜索图标将按其自然顺序显示...或者也将 float 放在铃铛和条形上。