0

現在、単純なフッターに取り組んでおり、テキストの 1 行を左に、もう 1 行を右に揃えたいと考えています。

これは私がこれまでに持っているものです:

<div id="footer">
   Last Updated: October 15, 2012 <!--left align-->
   Contact Us  Login <!--right align (these will be links)-->
</div>

#footer {
font-family: Arial;
font-size: .9em;
color: #24ACAE;
border-top: 1px solid #24ACAE;
margin-left: 90px;
margin-right: 90px;
padding-top: 5px;
}

上記のコードでは、2 行のテキストが隣り合って表示されます。これを修正するさまざまな方法を試しました。たとえば、2 行目をスパンに入れて右揃えにし、行をテーブルに入れるなどです。私が試した結果、両方の行が適切に整列することはありませんでした。

最初の行が更新されて長くなると、2 番目の行が下に押し出されるため、a を単独で使用してmargin-leftも機能しません。相対的な配置にも同じ問題があるようです。

うまくいけば、私が見落としている単純なものがあることを願っています。

4

1 に答える 1

2 
<div id="footer">
<span style="float:left;">Last Updated: October 15, 2012</span>
<span style="float:right;">Contact Us  Login</span>

</p>

それらをスパンに配置し、スパンをスタイリングすると、目的が達成されるはずです!

UPDATE インラインにしたくない場合は、html コードで css を使用してこれを行うこともできます。そのようです：

<style>
.left {float:left;}
.right {float:right;}
</style>

その後

<div id="footer">
<div id="footer">
<span class="left">Last Updated: October 15, 2012</span>
<span class="right">Contact Us  Login</span>
</div>​​​​​​​​​​​​​​​​​​​​​​

これにより、ページ全体でこれらの css クラスを再利用できるようになり、float:left/right; を適用できるようになります。プロパティを任意の DOM 要素に

これが機能していることを示すjsfiddleです (正しく表示されない場合は、ブラウザのサイズを変更してください。最初のブラウザ ウィンドウでは、すべてのテキストを 1 行に収めるのに十分なスペースがなかったためです)。

于 2012-10-15T22:57:30.200 に答える