一個div與中心對齊div和右側div div

我有一個div元素（.shop-bar），它是屏幕寬度和固定位置的100％。我想要裏面的兩個div;第一個（.search-bar）是父級和中級對齊（完成）的50％，第二個（.cart）是在屏幕右側（和父級div）[問題]。一個div與中心對齊div和右側div div

HTML：

<div class="search"> 
    <div class="search-bar"> 
    <input type="text" id="searchbox" placeholder="Search"><button><i class="fa fa-search"></i></button> 
    </div> 

    <div class="cart"> 
    <i class="fa fa-shopping-cart"></i> 
    </div> 
</div>

CSS：

.search { 
    position: fixed; 
    left: 0; 
    right: 0; 
    background-color: blue; 
} 

#searchbox { 
    color: #f0a830; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    background-color: #202020; 
    border-radius: 5px 0 0 5px; 
} 

.search-bar input { 
    width: 90%; 
} 

.search-bar button { 
    background-color: #202020; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    border-radius: 0 5px 5px 0; 
    width: 10%; 
} 

.cart { 
    display: inline-block; 
    color: white; 
    font-size: 32px; 
}

我已經試過浮動.cart正確的，但移動.cart到下一行。我做了一個顯示：內聯塊和所有的變化。內聯塊可以將它移動到我想要的位置，但它實際上並不在div中;更像是浮在上面。我怎樣才能讓它成爲父母的權利？

來源

2017-05-28 Quito Guillermos

您的html中沒有'.shop-bar'元素 –

對不起@MichaelCoker。發佈CSS後，我更改了html。 –

不用擔心。你弄明白了嗎？如果不是，請更新您的html和css，使其匹配。 –

您可以在具有文本對齊中心的容器內使用display inline-block。

<div class="wrapper"> 
    <div class="rightalign">right content</div> 
    <div class="centeralign">center content</div> 
</div> 

<style> 
    .wrapper{ text-align:center; } 
    .centeralign, .rightalign { width:200px;height:100px; } 
    .centeralign{ display:inline-block;background:#ccf; } 
    .rightalign{ float:right;background:#fcc; } 
</style>

其他的解決方案是創建一個多列布局。

來源

2017-05-29 00:35:11 admcfajn

它的工作原理。但是，右對齊的內容會推送居中的搜索欄。有沒有辦法阻止它？ –

'.centeralign {display：inline-block; margin-right：-100px; background：#ccf; }' – admcfajn

一個div與中心對齊div和右側div div

回答

相關問題