1

現在、HTML で設定された単純なヘッダーがあり、CSS を使用してスタイルを設定しています。「#header」と「#header #right」という複数のスタイルを作成しました。「float: right;」を使用する場合 私が言及した 2 番目のスタイルでは、テキストをほぼ完全にヘッダーの下に移動します。

コード：

index.html:

<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>

<div id='header'>
<font size='+3'>FriendSub &nbsp; &nbsp;</font>
<a href='index.php'>Home</a> | 
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'> 
  <p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>

main.css:

@charset "utf-8";
/* CSS Document */

#header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    background-color: #093;
    border-top-left-radius: 18;
    border-top-right-radius: 18;
    width: 96%;
    height: 58px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 14px;
    padding-right: 14px;
    color: #FFF;    
    font-weight: bold;
    text-shadow: #000 0.1em 0.1em 0.2em;
}

#header a {
    color: #FFF;
    text-decoration: none;
    text-shadow: #000 0.1em 0.1em 0.2em;
}

#header a:hover {
    color: #CCC;
}

#header #right {
    float: right;
    width: 220px;
    background-color: #093;
}

#content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CCC;
    width: 1000;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 14px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 600;
    font-weight: bold;
    border-bottom-left-radius: 18;
    border-bottom-right-radius: 18;
    line-height: 1%;
}

JSFiddle はこちら: http://jsfiddle.net/aKtep/

4

6 に答える 6

1

簡単な解決策 (希望する結果を理解していると仮定) は、要素を再配置して、右にフロートさせたい項目がヘッダーの最初になるようにすることです。浮動要素はドキュメントの通常の流れから削除され、十分なスペースがない限り次の行にプッシュされることがよくあります。ただし、フローティング要素が最初に来ると、後続の要素がその周りに配置されます。フィドルを参照してください。

于 2012-05-25T18:10:47.947 に答える
1

<div style='clear:both'></div>閉じた直後に追加してみて、#right何が起こるか見てみましょう

于 2012-05-25T18:06:24.983 に答える
0

#headerコンテナーのすべてのコンテンツを収容できる単位の幅を指定する必要があります。

ここで行ったのは#header、幅を から96%に変更したことだけです960px

于 2012-05-25T18:08:16.873 に答える
0

あなたが何を求めているのか100％確信が持てないと思いますが、通常のヘッダーが正しいヘッダーをその下に押し下げているようです。私が見る限り、ヘッダー コンテナーの幅が 96% であることに関係している可能性があります。その場合、#right #header の幅はピクセルであり、元のヘッダー コンテナーには、そのピクセル数分のスペースが十分に残っていない可能性があります。の幅を#header #right%に変更してみてください

アドバイスとして、ID をあまり使用しないでください。後で苦労する可能性がある非常に高い特異性を作成しています。

于 2012-05-25T18:08:25.797 に答える
0

ログイン/登録リンクの周りから p タグを削除し、#header #right を変更して padding-top:10px; を含めます。また、本当に必要のないときに div を使いすぎています (divitus)

于 2012-05-25T18:06:38.903 に答える
0

前述のように、 #rightセグメントclear: floatの後に使用する必要があります。

これは、clear プロパティが直接float プロパティに関連付けられているためです。 要素を浮動要素の隣に配置するか、それらの下に移動するかを指定します。このプロパティは、浮動要素と非浮動要素の両方に適用されます。

于 2018-05-18T14:29:38.107 に答える