Question

我是HTML / CSS新手所以我正在创建一个简单的网站来了解它是如何工作的。

我有一个包含网站名称和链接集合的标题。我想格式化它们以便它们并排。（类似于StackExchange，如上所示。左侧的网站名称，右侧的链接）。

我已经包含了我目前的标记，但它似乎没有做任何事情。我怀疑我没有错误地使用CSS类和子类，或者我的概念错了。有人可以指出我可能犯的任何错误或指向我的资源以供进一步参考吗？任何帮助，将不胜感激。谢谢！

编辑：我希望网站名称位于口号上方，右侧和左侧链接。

CSS

header 
{
    clear:both;
}

header .section 
{
    float:left;
}

header .nav 
{
    float:right;
}

HTML

<header>
        <section>
            <h1>My Website</h1>
            <p>My Slogan</p>
        </section>
        <nav>
            <a href="#">Link A</a> | 
            <a href="#">Link B</a>
        </nav>
</header>
<article>
    My website contents
</artcile>

回答

有多个正确答案，但遗憾的是我只能将其标记为正确。正确答案是删除＆＃34; .section＆＃34;中的点。和＃34; .nav＆＃34;以及将标题设置为溢出：自动而不是清除：两者。谢谢大家！

Answer 1

一种简单的方法是添加此规则：

nav {
    float:right;
}
section {
    float:left;
}
section h1 {
    margin:0;
}
article {
    clear:both;
}

<强> jsFiddle example

这使得标题中的所有元素都显示为内联并且并排显示。

Answer 2

这是FIDDLE

header {
  height: 50px;
}
header section {
  float:left;
}
header nav {
  float:right;
}

Answer 3

你想要这样的东西，对吧？

header {
    overflow:auto;
}

header section {
    float:left;
}
header nav {
    float:right; /* or left */
}

jsFiddle here

正如评论中所述，您使用header而不是.header，section而不是.section，nav而不是.nav。 }。

.用于引用类。

overflow:auto将使父级包含子级，因为未在其上设置高度。

HTML5 - 并排显示项目

3 个答案: