html - 使用 CSS 对齐多个元素

Question

全部，

我正在尝试对齐一些元素，向右浮动和内联，但运气不佳。

这是我正在尝试做的事情(请参阅右侧浅蓝色标题内的 3 个元素)

我要结束这个:

实例 http://jsfiddle.net/castonzo/3G4jb/

我的 HTML

 <div id="addCounselorSection">
     <div class="blue-toolbar">
         <span class="blue-toolbar-title">Club Counselors</span>
         <div class="blue-toolbar-search-tools">
             <div class="blue-toolbar-search-tools-title">Find counselors</div>
             <div><input type="text" /></div>
             <div class="blue-toolbar-search-tools-link"><a href="#">Add</a></div>

         </div>
     </div> 
 </div>

我的 CSS

/****** Toolbar ****************/
.blue-toolbar {

    background-color: #086CA1;
    border: 1px solid #235B79;
    height: 45px;
    width: auto;
    margin-bottom: 13px;
    margin-top: 20px;
    position: relative;
}

.blue-toolbar-title {

    position: absolute; 
    bottom: 0; 
    left: 0; 
    float:left; 
    padding-left:5px; 
    padding-bottom:4px; 
    color:#ffffff; 
    font-weight:bold; 
    font-size:18px;
}

.blue-toolbar-search-tools {

    float: right;
    width: auto;
    display: block;
}

.blue-toolbar-search-tools-title {

    color:#ffffff; 
    font-weight:bold; 
    font-size:14px;
    float: left;
    position: absolute; 
    bottom: 0;
    right: 0;
}

.blue-toolbar-search-tools a{
    color:#ffffff;
    font-weight:bold;

}

Answer 1

移除绝对定位并将所有三个子元素的display从block更改为inline-block。至于垂直定位，只要给父元素加上边距就可以了。

UPDATED EXAMPLE HERE

.blue-toolbar-search-tools {
    float: right;
    margin:16px 10px;
}
.blue-toolbar-search-tools > div {
    display:inline-block;
}