Question

我想创建一个标题，其中几个字对齐到标题div的最左侧，并且几个字对齐到最右侧。我最初是通过创建span s（.headerLeft和.headerRight）并调整我想要对齐的部分的对齐来实现的。但是，如果我想要background-color标题div，则会产生问题。这里的最佳实践解决方案是简单地添加一些内联CSS样式，还是有更好的方法？

我的代码（example）

HTML

<div class="header">
 <span class="headerLeft">Welcome to .</span>
 <span class="headerRight"><a href="login.html">Login</a> | <a
 href ="register.html">Register</a></span>
</div>

CSS

.header {
 width:100%
 position:fixed;
 top:0;
 margin-top:0;
 background-color:red;
 text-color:#C14000;
}
.headerLeft {
 float:left;
 text-align:left;
}
.headerRight {
 float:right;
 text-align:right;
}

Answer 1

#header {
    overflow: hidden;
}

此代码将解决您的问题。 height的{{1}}会自动从#header内的最高元素中获取height。

另一种方法是为#header手动设置height。

你不需要内联样式：）

Answer 2

您需要为标题类设置overflow属性以强制它包围内部跨度。见http://jsfiddle.net/PsychegoPro/rnDT8/

Answer 3

您需要清除浮动，以便div具有实际高度。

这可以通过使用clearfix来实现。 What is a clearfix?

CSS在Div中对齐文本

我的代码（example）

HTML

CSS

3 个答案: