テキストリンクとテキストで、高さが違ってしまいます。これを直したいのですが…

質問

左側のテキストリンクは左上に、右側のテキストは右上に表示させたいのですが、FｘとIEで高さがずれてしまいます。どちらのブラウザでもIEのように高さが合うようにしたいのですが…

以下、ソースです
----------------------------------------
HTML
<div id="footer">
<a href="index.html">左端に揃えたい</a>
<p>右端に揃えたい</p>
</div>

CSS
#footer a {
float: left;
}
#footer p {
float: right;
}
----------------------------------------

素人質問で申し訳ありません。いろいろ考えた結果、左側はリンクで、右側がテキストだから高さが合わないのではないかと思っているのですが、対策が取れませんでした。

回答No.3

abril · ベストアンサー

---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<div id="footer">
<a href="index.html">左端に揃えたい</a>　…後の説明の便宜上、ここを【A】とします
<p>右端に揃えたい</p>　…（同上）【B】とします
</div>
---------------------------------------------------------------------

現在のHTMLの文書構造を変えずに、という事であればCSSを以下の様に変更すれば可能は可能です。
質問者様のHTML文書のDOCTYPE等が不明ですので、以下はとりあえずHTML4.01 Strictでの検証結果です。
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#footer {
zoom: 100%;←(注1)現在の#footerの指定（が既にあるなら）に追加
}
#footer:after {←(注2)ここの指定全体を追加
height: 0;
visibility: hidden;
content: "";
display: block;
clear: both;
}
#footer a {
float: left;
}
#footer p {
float: right;
margin: 0;←追加
}
---------------------------------------------------------------------
ANo.1様もご指摘の通り、p要素にはUA（とりあえずブラウザの事だと思っておいて下さい）毎にディフォルトで垂直方向のマージン（余白）が含まれている場合があります。よって”今回の場合は”段差ができるのはこれが原因となっている様ですので、上記の様に#footerの子要素のpのマージンを0にすればひとまず解消されます。

なお、(注1)と(注2)は所謂clearfixと呼ばれるよく使われる小技で、子要素がフロートしている親要素が本来であれば高さを失ってしまうのを回避する為のテクニックです。何故これを（ついでに）追加しておいたかというと、問題の箇所がフッター（おそらくこの下にはbodyとhtmlの閉じタグ以外要素がない？）という事で多分お気づきになられてないのではないかと思いますが、IEではバグにより「子要素がフロートしているのに親要素が高さを失っていない状態」になっているのに対し、Firefox等より仕様に準じた解釈をするブラウザ上では、前述した通り子要素（p、a）がフロートしている親要素（<div id="footer">～</div>）は高さがなくなってしまっているからです。
#footer {～}の指定に例えば一時的に背景色を塗ってみたりボーダーを引いてみたりすると、オリジナルの指定では、IEとそれ以外の主要モダン・ブラウザでのその部分での表示結果が異なっている事が一目瞭然になります。

ただ、より適切な文書構造…という事を考えた場合、他の回答者様も言及されております様に、マークアップ自体を見直してみた方がよろしいかと思います。【A】の箇所を内容に応じてリスト（ul）なりパラグラフ（p）なりの子要素とした上で、適切なスタイルを与えます。
もしも、<div id="footer">～</div>の内容が、ページナビゲーションの様なものであり、現在【B】の箇所が単に当該ページなのでリンクが外れている…という様な状態であれば、【A】【B】はいずれもリストulを構成する子要素liでマークアップした方が適切でしょう。
以下は、そういった内容の場合のマークアップ及びスタイルの一例です。

---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<div id="footer">
<ul>
<li><a href="index.html">左端に揃えたい</a></li>
<li class="here">右端に揃えたい</li>
</ul>
</div>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#footer ul {
zoom: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#footer ul:after {
height: 0;
visibility: hidden;
content: "";
display: block;
clear: both;
}
#footer ul li {
float: left;
padding: 0;
margin: 0;
}
#footer ul li.here {
float: right;
}
---------------------------------------------------------------------

もしも、#footerの中に入る要素がナビゲーションリスト以外ないのであれば、<div id="footer"><ul>～</ul></div>というマークアップではなく<ul id="footer">～</ul>とした方がより構造がすっきりします。その場合は上記で"#footer ul"というセレクタにしている箇所を全て"ul#footer"もしくはただ"#footer"と変更すればOKです。

お礼

文章自体から見直します。非常に勉強になりました。ありがとうございます。

回答No.2

ORUKA1951

<div>は汎用ブロック要素で、確かに直接インライン要素は入れられますが、できればブロック要素を入れる入れ物と考えたほうが良い。
　ですので、<p><a href`"">・・・・</a></p>

また、ずれるのは、あくまでfloatは本来現れるべき位置で、そのまま左右いずれかによるので、現れる位置が下なら下にずれる。floatは、ある要素を左右いずれかに寄せて、他の要素を回り込ませるためのプロパティで、このような用途に使うべきではない。大抵失敗する。

また、HTMLは意味的にはリストでしょうから、、(XML2.0では<nl>Navigation Listになる予定)

<ul class="Navi">
<li class="link"><a href="./index.html">左にそろえたい</a></li>
<li>右にそろえたい</li>
</ul>
とマークアップしておいて
ul.Navi{
display:block;
padding:5px 10px;
position:relative;
border:solid gray;
border-width: 2px 0px;
height: 20px;
}
ul.Navi li{
position:absolute;
top:0opx;
right:0px;
text-align:right;
display:block;
margin:0px;
padding:0px;

}
ul.Navi li.link{
text-align:left;
left:0px;
}
とか・・・・。

お礼

ありがとうございます。おっしゃる通り、意味的にはリストです。ソース、どうもありがとうございます。今回はこのように使わせていただきます。

回答No.1

piro19820122

aはインライン要素、pはブロック要素 だからおかしくなるのでは？
（おそらくpにデフォルトで設定されているマージン等が有効になっている）

p じゃなくて span にしたら良いのではないかと思いますが…

お礼

その通りでした。デフォルトのマージンを0にすればすぐに修正できました。

今回は<p>のマージンを0にすることで対応しましたが、<span>を使っても同じ結果になりますよね。その場合、<p>と<span>と、どちらが正しいのでしょうか。<div>というブロック要素の中だから、ブロック要素である<p>よりも、インライン要素である<span>を使うべきでしょうか。

補足

その通りでした。デフォルトのマージンを0にすればすぐに修正できました。

今回は<p>のマージンを0にすることで対応しましたが、<span>を使っても同じ結果になりますよね。その場合、<p>と<span>と、どちらが正しいのでしょうか。<div>というブロック要素の中だから、ブロック要素である<p>よりも、インライン要素である<span>を使うべきでしょうか。