4

左揃えと右揃えのテキストが表示されるようにフッターを分割しようとしています。私は次のものを持っていますが、2つの要素が次々に表示されています：

#footer {
    clear: both;
    background-color: #330066;
    padding: .5em;
    font-size: 0.8em;
    color: #fff;
}

#footer p .left {
    text-align:left;
    float:left;
}

#footer p .right {
    float:right;
    text-align:right;
}


<div id="footer">
    <p class="left">
        Copyright © 2009 
    </p>
    <p class="right">
        Designed by xxxxxx
    </p>
</div>

本当に単純なはずですが、私はそれを機能させることができません-誰かがアドバイスを提供できますか？

ありがとう

ヘレン

4

5 に答える 5

8

footer p .right使用しているのではなく使用していますfooter p.right（スペース文字に注意してください）。つまり、.rightand.leftクラスは段落には適用されませんが、段落内の子孫要素には適用されます。または、タイプミスを意味して、CSSが失敗する可能性もあります:)

HTMLをここにコピーしてください。

編集： HTMLを投稿したようです。私の仮定は正しいことがわかりました。pと.left/の間のスペースを削除します.right。また、とにかく段落をフローティングにしている場合は、text-alignプロパティを省略できます。

#footer p.left {
 float: left;
}

#footer p.right {
 float: right;
}

編集：あなたのコメントに応えて：それはうまくいくはずです。ここに小さなテストケースがあります：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Test case for the CSS footer problem</title>
  <style>
   #footer { width: 300px; outline: 1px solid red; }
    #footer p.left { float: left; }
    #footer p.right { float: right; }
  </style>
 </head>
 <body>
  <p>See <a href="http://stackoverflow.com/a/867599/96656" title="Stack Overflow: CSS footer; trying to split into two columns">http://stackoverflow.com/a/867599/96656</a> for details.
  <div id="footer">
   <p class="left">Copyright © 2009</p>
   <p class="right">Designed by xxxxxx</p>
  </div>
 </body>
</html>
于 2009-05-15T08:39:58.253 に答える
1

左右の幅を設定してみましたか（例：それぞれ50％）

于 2009-05-15T08:39:07.693 に答える
1

前に提案したように #footer の clear:both を削除する必要はありません。Mathias Bynens が言ったように、「p .left」の代わりに「p.left」と書く必要があります。

#footer {
    clear: both;
    background-color: #330066;
    padding: .5em;
    font-size: 0.8em;
    color: #fff;
}

#footer p.left {
    text-align:left;
    float:left;
}

#footer p.right {
    float:right;
    text-align:right;
}


<div id="footer">
     <p class="left">
         Copyright © 2009 
     </p>
     <p class="right">
         Designed by xxxxxx
     </p>
     <div style="clear:both"></div>
</div>
于 2009-05-15T09:06:52.947 に答える
0

段落はブロックレベルの要素であるため、並べて表示する場合は、フロートを削除してインラインに設定する必要があります。

footer p.left {text-align:left; display:inline; }
footer p.right {text-align:right; display:inline; }

また、事前に#footerまたは.footerのいずれかである必要があると思いますか？

于 2009-05-15T08:44:15.357 に答える
0

問題は、すべてのフロートを殺す#footerがあることです。clear: both;

あなたが持っているなら、それはより良いでしょう：

#footer {
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff;
    width: 100%;
    overflow: hidden;
 }

p.left { float: left; }
p.right { float: right; }

width: 100%;と は、overflow: hidden;フロートが作成された後にクリアされるため、問題を解決します。

上記のコードを使用すると、次のことが可能になります。

<div id="footer">
    <p class="left">Copyright &copy; 2009</p>
    <p class="right">Designed by ****</p>
</div>
于 2009-05-15T08:51:22.577 に答える