Question

我理解在css中如果你使用＆＃34;＆gt;＆＃34;然后标签必须是直接子项，但是如果你只使用一个空格，那么它将是一个兄弟选择器，只要标签在另一个标签内，就会应用css。那么为什么它在下面的代码中，我的侧边栏中的文字不是居中的，除非我将侧边栏标题div作为侧边栏div的直接子节点？

相关CSS：

.sidebar {
    float:right; 
    width:24%; 
    margin-right:1%;
    margin-top:20px;
    background-color: #e5e5e5;
    min-height:400px; 
    border-radius: 6px;
    box-shadow: 4px 4px 10px #999
}

.content-padding {
    float:left; 
    padding:10px;
}   

.sidebar .sidebar-header {
    text-align:center
}

相关HTML：

<div class="sidebar">
    <div class="content-padding">
        <div class="sidebar-header">Favorites</div>
    </div>
</div>

Answer 1

当它是content-padding的孩子时它不起作用的原因是因为该元素正在浮动。当浮动元素的宽度为auto时，它具有'shrink-to-fit' widt h。因此，从技术上讲，子元素是居中的，你无法分辨。如果您希望它按预期工作，请不要浮动元素，或者给它宽度100%。

Example Here

.content-padding {
    float:left;
    padding:10px;
    width: 100%;
}

Answer 2

将float:left;移至.content-padding

JSFiddle - DEMO

<强> CSS：

.sidebar {
    float:right;
    width:24%;
    margin-right:1%;
    margin-top:20px;
    background-color: #e5e5e5;
    min-height:400px;
    border-radius: 6px;
    box-shadow: 4px 4px 10px #999
}
.content-padding {
    padding:10px;
}
.sidebar .sidebar-header {
    text-align:center
}

CSS兄弟选择器不工作（不使用＆gt;）

2 个答案: