CSS:所有 sub-div 元素与 centerder 第二个元素在同一行

标签 css

我试图在一行中对齐 3 个子 div 元素,第一个元素向左浮动,第三个元素向右浮动,第二个元素居中。 下面是我的草稿。我错过了什么? http://jsfiddle.net/yDzL9/

在我的真实电子商店中,问题在于包含 input (button) 的第二个 div 的对齐,但在 jsfiddle 的示例中,问题在于第三个 div。

最佳答案

对所有子元素使用 display: inline-block 并将 white-space: nowrap; 属性设置为父 div。

例子-

HTML:

<div id="container">
    <div class="wishlist">
    </div>
        <div class="cart">
    </div>
        <div class="compare">
    </div>    
</div>

方法一(无 float div):

CSS:

#container {
    height:26px;
    width:300px;
    background-color:#009900; 
    white-space: nowrap;
}


#container div{
    display: inline-block;
    width:100px;
    height:26px;
}

Working Example

方法二( float div)

CSS:

#container {
    height:26px;
    width:300px;
    background-color:#009900; 
    white-space: nowrap;
    text-align: center;
}

#container div{
    display: inline-block;
    width:50px;
    height:26px;
}

.wishlist{
    background-color:blue; 
    float: left;
}

.cart{
    background-color:black; 
}

.compare{
    background-color:red; 
    float: right;
}

Working Example

关于CSS:所有 sub-div 元素与 centerder 第二个元素在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24158615/

相关文章:

css - 将 css 类附加到我的光标

css - 修复了带有网格布局的导航栏

Google App Maker 中必填字段的 CSS

css - 为什么具有 z-index 值的元素不能覆盖其子元素?

html - 单击 Accordion 时如何在悬停时更改图像背景?

javascript - 在关闭按钮旁边的模式标题中 float 按钮

javascript - 通过Jquery给选中的li添加类

javascript - 滚动时将 div 保持在顶部但保持边距

css - 文本下划线跨越空格

html - 使用 100vw 和 vh 会创建超出视口(viewport)大小的额外空间。我该如何摆脱它?