一个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

回答

相关问题