本当は他に方法あるのでしょうが、ブログのリンクでしか使わないので 一般的にも簡単なほうがいいと思ったので。 テストは、リアルタイムHTML で実行してみて下さい。
- １行目
- ２行目
- ３行目
- １行目
- ２行目
- ３行目
- １行目
- ２行目
- ３行目
- １行目
- ２行目
- ３行目
<ul> <li>１行目</li> <li>２行目</li> <li>３行目</li> </ul> <ul> <li>１行目<br /></li> <li>２行目<br /></li> <li>３行目<br /></li> </ul> <ul> <li>１行目<br /><br /></li> <li>２行目<br /><br /></li> <li>３行目<br /><br /></li> </ul> <ul> <li style='line-height:0px'>１行目<br /><br style='line-height:25px'/></li> <li style='line-height:0px'>２行目<br /><br style='line-height:25px'/></li> <li style='line-height:0px'>３行目<br /><br style='line-height:25px'/></li> </ul>
ただ、ブラウザによって多少高さが違うようなんですが、まあもともと かなり違うものですからデザイナでは無いのでよしとしてもいいと思い ます。 ※ Opera はこのページでうまくいかないですね。 ( CSS の important がたぶん邪魔しています )
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
