1

我是 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>

已回答

有多个正确答案，但不幸的是我只能将一个标记为正确。正确的答案是删除“.section”和“.nav”中的点，并将标题设置为overflow:auto而不是clear:both。感谢大家！

4

3 回答 3

3

One easy way would be to add this rule:

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

jsFiddle example

This makes all the elements within the header display inline and appear side by side.

于 2013-09-23T18:46:49.683 回答
3

这是一个小提琴

header {
  height: 50px;
}
header section {
  float:left;
}
header nav {
  float:right;
}
于 2013-09-23T18:52:33.500 回答
2

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

header {
    overflow:auto;
}

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

jsFiddle在这里

正如评论中提到的，您使用headeras反对.header，section反对.section，nav而不是.nav。

.用于引用类。

overflow:auto将使父级包含子级，因为它没有设置高度。

于 2013-09-23T18:53:33.010 回答