使用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;
}

Answer 2

试试这个：

CSS：

<style>
/****** 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;
    bottom: 0;
    right: 0;
    float:left;
    padding:12px 5px;
}

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

.blue-toolbar-search-tools-input{
    padding:8px 5px;
    float:left;
}
.blue-toolbar-search-tools-link{
    padding:8px 5px;
    float:left;
}
</style>

<强> 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 class="blue-toolbar-search-tools-input"><input type="text" /></div>
             <div class="blue-toolbar-search-tools-link"><a href="#">Add</a></div>

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

Answer 3

默认情况下，div是块元素，因此您可以将其显示为内联或浮动它：

.blue-toolbar-search-tools div{ float: left; }

或

.blue-toolbar-search-tools div{ display: inline; }