1

私のCSSコード:

#header
{
width:900px;
border:dashed 1px;
margin:5px;
padding:2px;
}
#header .fl_left
{
float:left;
display:block;
width:260px;
}
#header .fl_left h1
{
float:left;
background-color:#666633;
color:#0033CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
}

私のhtmlコード:

<body>
<div id="header"><div class="fl_left"> <h1>hello all</h1> </div></div>
</body>
</html>

出力 'hello all' がヘッダーの外側に表示されます。私の意図は、ヘッダー内に h1 要素のテキストを配置することです。

ヘッダー ID ルールが h1 要素に適用されないのはなぜですか。

4

6 に答える 6

2

スタイル宣言に追加overflow: hidden;する必要があります。#header

また、親がすでにフロート<h1>されていることを考慮して、要素を本当に左にフロートする必要がありますか? .fl_leftもしそうなら、それ.fl_leftも必要になりoverflow: hidden;ます。

于 2012-10-05T13:58:53.007 に答える
1

#headerセレクターはヘッダー要素自体にのみ適用され、その子には適用されず、子に継承されるスタイルには何もありません。

テキストがヘッダーの外に出てしまう理由は、ヘッダーにはスペースをとらないフローティング要素しか含まれていないため、ヘッダーの高さに影響を与えないためです。

ヘッダーに追加overflow: hiddenして、その子を含めることができます。

#header {
    width:900px;
    border:dashed 1px;
    margin:5px;
    padding:2px;
    overflow: hidden; }
于 2012-10-05T13:58:45.913 に答える
0

fl_leftdivとclassを削除してfloat: leftから、h1からdivに移動します#header

HTML：

<div id="header"><h1>hello all</h1></div>

CSS：

#header
{
float: left;
width:900px;
border:dashed 1px;
margin:5px;
padding:2px;
}
#header h1
{
background-color:#666633;
color:#0033CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
}

結果：jsFiddle

于 2012-10-05T14:02:20.160 に答える
0

からテキストのバインドを解除しているタグで使用floatしています。使用する必要がある場合は、セレクターを使用してください。h1h1float:after

このコードをCSSファイルに追加します（追加する前に上記のリンクを参照してください）

#header .fl_left h1
{
  content:".";
  visibility:hidden;
  clear:both;
}
于 2012-10-05T14:00:05.677 に答える
0

次のことをお勧めします。

CSS:

#header{width:900px; border:dashed 1px; margin:5px; padding:2px;}
#headerTitle{float:left; background-color:#666633; width:260px; }
#headerTitle h1{color:#0033CC; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:oblique;}

HTML:

<div id="header">
    <div id="headerTitle>
        <h1>hello all</h1>
    </div>
</div>

これにより、最もクリーンなコードが得られます。ヘッダー div があり、このヘッダー div にタイトル div が浮かんでいます。このようにして、右側のヘッダー div 内に他のものを引き続き追加できます (その後、必ずクリアしてください)。必要に応じて、headerTitle ボックスに追加することもできます。

于 2012-10-05T14:08:38.237 に答える
0

これが私がしたことです：-

  • ヘッダーとその親 div は左にフローティングされ、div をフローティングするだけで十分です
  • フローティング要素はスペースを占有しないため、ヘッダー テキストが div の外側に境界線で表示されます
  • また、タイプミスを修正し、フォーマットを改善しました

これを実際に確認するには、このJSFiddleを参照してください。


HTML コード

出典: A List Apart の記事

<div id="header">
    <div class="spacer">
        &nbsp;
    </div>

    <div id="header-title">
        <h1>hello all</h1>
    </div>

    <div class="spacer">
        &nbsp;
    </div>
</div>

nbsp;スペーサー div が空にならないように追加します。


CSSコード

ドキュメント: W3Schools CSS リファレンス

#header {
    width:900px;
    margin:5px;
    padding:2px;

    border:dashed 1px; }

#header #header-title {
    float:left;
    display:block;
    width:260px; }

#header #header-title h1 {
    float:left;

    background-color:#666633;
    color:#0033CC;

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:oblique; }

#header .spacer {
    clear: both; }​

このclear: both;スタイルでは、浮動アイテムがどちらの側にも表示されないため、アイテムはヘッダーの下ではなく、ヘッダーの周りに表示されます。

于 2012-10-05T14:35:05.037 に答える