| ブログトップ | CSS関連 | HTML関連 |

inline-blockを使うときはinline要素からアプローチせよ!

この記事は1年以上前の記事のため、内容が古い可能性があります。

inline-blockといえば、インライン要素でありながら、ブロック要素であるwidthやheight、marginやpaddingなどを使えるようになるというスタイルです。

たとえば

<p class="e_date">2010.09.08</p>

<p class="e_title">記事のタイトル</p>

というhtml記述に対して

<style>

.e_date{
display:inline-block;
width:72px;
height:20px;
padding:5px;
background-color:#000000;
color:#FFFFFF;
}

.e_title{
display:inline-block;
width:200px;
}

</style>

というスタイルを設定すると以下のようになります。

サンプル

しかし、Firefoxなどモダンブラウザでは使用できますが、IE6、7ではまだ実装が不十分です。IE8でもサーバによってはなぜか実現できたりできなかったりします。(このサクラインターネットでは使えませんでした。)

これをIEでも実現させるには、ブロック要素をinline-blockにするのではなく、インライン要素をinline-blockにしてみてください。

<span class="e_date">2010.09.08</span>

<span class="e_title">記事のタイトル</span>

スタイルは上記のと同じです。

以下実行結果

サンプル2

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年09月08日 | コメント(0) | トラックバック(0) | CSS関連 | HTML関連

トラックバック

トラックバックURL

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2024 ダリの雑記