1

私は HTML/CSS が初めてなので、その仕組みを学ぶために簡単な Web サイトを作成しています。

Web サイト名とリンクのコレクションを含むヘッダーがあります。横に並べるようにフォーマットしたいと思います。(上記の StackExchange に似ています。左側の Web サイト名、右側のリンク)。

現在のマークアップを以下に含めましたが、何もしていないようです。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>

回答済み

複数の正解がありましたが、残念ながら正解とマークできるのは 1 つだけです。正解は、".section" と ".nav" のドットを削除し、ヘッダーを clear:both ではなく、overflow:auto に設定することでした。みんな、ありがとう！

4

3 に答える 3

3

簡単な方法の 1 つは、次のルールを追加することです。

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

jsFiddle の例

これにより、ヘッダー内のすべての要素がインラインで表示され、並べて表示されます。

于 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

コメントで述べたように、の代わりに、の代わりにを使用headerします。.headersection.sectionnav.nav

は、.クラスを参照するために使用されます。

overflow:auto高さが設定されていないため、親に子が含まれるようになります。

于 2013-09-23T18:53:33.010 に答える