Question

现在代码正在做我想要它做的事情。同一行上有多个div。但是对于我使用的每个元素＆＃34; float：left＆＃34;而且我不认为这是一种很好的做法，我也不想使用它。我确实尝试使用display：inline-block但它仍然将我的div放在新行上。

https://jsfiddle.net/6s7Lnw0e/

CSS：

.ui-topbanner {
    color:#000;
    height: 31px;
    background-color: #f2e9da;
    border-bottom: 1px solid #d9cebc;
}
.ui-topsubbanner {
    position:relative;
    color:#000;
    height: 30px;
    background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
    float:left;
    height: 30px;
    padding:2px 5px 0 5px;
}
.ui-search-wrapper {
    float:left;
}
.ui-seperator {
    float:left;
    padding:0 5px;
    width:2px;
    height:23px;
    display:inline-block;
    background-image: url(http://i.stack.imgur.com/rMuyM.png);
    background-position: 5px 3px;
    background-repeat: no-repeat;
}
.ui-button-submit {
    float:left;
    height:22px;
    line-height:22px;
    padding:0 7px;
    color:#000;
    font-size:.7rem;
    border-right:1px solid #ddd1b8;
    border-bottom:1px solid #ddd1b8;
    vertical-align:middle;
    background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #faf7ef 50%, #faf7ef 100%);
}
.ui-button-submit img{
    vertical-align:middle;
}
.ui-button-text {
    padding-left:2px;
    vertical-align:middle;
}
.ui-button-submit:hover {
    border-right:1px solid #e5c365;
    border-bottom:1px solid #e5c365;
    cursor:pointer;
    background: -webkit-linear-gradient(top, #fffbef 0%, #fff4d2 50%, #ffe8a6 50%, #ffe8a6 100%);
}
.input-search {
    height:19px;
    line-height:19px;
    width:300px;
    border:1px solid #ddd1b8;
    color:#61718c;
    padding:0 20px 0 4px;
    font-size:.70rem;
    font-weight:700;
    background-image: url(../images/input_search_bg.png);
    background-position: right;
    background-repeat: no-repeat;
}

HTML：

<div class="ui-topsubbanner">
<div class="ui-topsubbanner-wrapper">

    <div class="ui-search-wrapper"><input type="text" class="input-search" placeholder="Search..."></div>

        <div class="ui-seperator"></div>

    <div class="ui-button-submit"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/page-white-add-icon.png"><span class="ui-button-text"> New Track</span></div>

        <div class="ui-seperator"></div>
</div>
</div>

Answer 1

尝试display: inline-block;，它看起来对我很好，还添加了vertical-align: middle;来对齐项目。试试这个

.ui-topsubbanner-wrapper > div {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

Answer 2

Refer Fiddle :

所做的更改

替换

float: left

使用

display: inline-block 
vertical-align: middle

同一行上的多个div而不使用float：left在每个元素上

2 个答案: