誰かがこれで私を助けてくれませんか、私は髪を抜く段階を過ぎており、ハゲになりたくないのです!
SOを検索し、インライン/インラインブロック、フロート、ラインの高さ、フォントサイズのプロパティを数日以上読み、いじりましたが、まだ理解できない問題があります-2つのテキスト要素のベースラインを揃えます.
画像と 2 つのテキスト要素 (見出しとラベル) を持つ単純な (っぽい) ボタンを作成しています。テキスト要素を隣接する SPAN で区切り、見出しとラベルを異なる FONT-SIZES (ラベルを右揃えにすることを目指して) にしたいと考えています。
隣接するスパンのテキストを行の高さ内で垂直方向に中央揃えにし、共通のベースライン上に配置したいだけです。問題は、以下の方法を使用して近づいても、さまざまなブラウザー (特に Opera) で異なる結果が表示されることです。ほとんどすべてのブラウザーで結果がわずかに異なるように見えるため、ブラウザー固有の CSS 調整を行うことには消極的です。
他のすべては問題ないように見えるので、コードの不要な要素を取り除きました (line-height、vertical-align、padding、margin などのベースラインを揃えるためのさまざまな失敗した努力と共に)。だから、自分が持っているものはそのままではうまくいかないことに気づきました。また、問題をより明確に示すために、font-size の違いを誇張しました。
この質問が時間自体と同じくらい古い場合は申し訳ありませんが、ここで見つけたものは何も私の問題を解決していないようです。
CSS:
.sn-border {
position: relative;
display: block;
width: 237px;
height: 25px;
border-bottom: 1px solid #54534A;
overflow: hidden;
}
.sn-border span { display: block; overflow: hidden; }
.sn-label { width: 100%; line-height: 25px; }
.sn-title, .sn-tag { float: left; }
.sn-title { width: 165px; font-size: 14px; color: #54534A; }
.sn-tag { width: 72px; font-size: 8px; text-align: right; color: #8C8C8C; }
マークアップ:
<a href="#" class="sn-border">
<span class="sn-label">
<span class="sn-title">Example Heading 001</span>
<span class="sn-tag">Example Label</span>
</span>
</a>
JSFiddle: http://jsfiddle.net/sRLyM/
これは単純に違いないと確信していますが、考えられるすべてのことを試し、主題に関連するすべてのリンクを読んでみましたが、すべて役に立ちませんでした。どんな助けでも大歓迎です。