Question

我是UI World的初学者，尝试在我的一个示例中设置样式并安排html组件，但我看不到应用于HTML标题组件的所有子项的样式。以下是我尝试Demo in JsFiddle

的内容

.page_header_style {
    border: 1px solid blue;
}
.title_style {
    text-align:center;
}
ul {
    list-style: none;
}
li {
    display: block;
}
.user_style {
    float: right;
    margin-top: 0px;
}

<header class="page_header_style">
    <div>
        <div class="title_style">Main Title</div>
        <div>
            <ul class="user_style">
                <li>Welcome Srk</li>
                <li><a href="">Logout</a></li>
            </ul>
        </div>
    </div>
</header>

我希望看到第二个div，即欢迎信息＆amp;标题同一行中的列表，将标题保留在中心。

Answer 1

您应该将float: left应用于.title_style，并将清算元素（clear:both）放在.page_header_style

内在内容的底部

此处：http://jsfiddle.net/r1af39at/

Answer 2

Kosturko关于clearfixes的回答

您也可以使用clearfix解决方案，而不是将clear：both添加到元素中，因为在某些情况下，您需要额外的标记来应用clear：both。

两个clearfix都应用于包含浮动元素的直接父级。

Clearfix 1：只是应用overflow：hidden;这可行，但如果你想要使用绝对位置在父级之外流动，例如，可能会导致样式问题。

更好的clearfix是使用微clearfix，最好使用CSS预处理器。

祝你好运

Answer 3

为了制作＆＃34;标题＆＃34;明智地，在中心视口中的文本，您可以制作＆＃34;用户信息＆＃34;如position:absolute，因此它将超出正常的内容流程。请参阅下面的演示。

＆＃13;

.page_header_style {
    border: 1px solid blue;
    padding: 20px 0;
    position: relative;
}
.title_style {
    text-align:center;
}
.user_style {
    position: absolute;
    top: 10px;
    right: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

＆＃13;

<header class="page_header_style">
    <div>
        <div class="title_style">Main Title</div>
        <div>
            <ul class="user_style">
                <li>Welcome Srk</li>
                <li><a href="">Logout</a></li>
            </ul>
        </div>
    </div>
</header>

＆＃13;

JSFiddle演示： http://jsfiddle.net/wt5f81qz/

Answer 4

默认情况下，div元素具有display: block;属性。如果没有其他CSS样式，浏览器会将它们渲染到最后一个块元素下面。尝试使用display: inline-block;，因为这会将每个div视为内联元素，但将其内容视为块元素的内容。

例如，以下css将在同一行显示主标题和两个列表元素。

li{
    display: inline-block;
}
div {
    display: inline-block;
}

有关详情，请参阅w3schools's page on the display property。

CSS标题样式不适用于儿童

4 个答案: