3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

2009-01-19

(HTML)liで空行(空リスト)を表示するのにハマる

Webがらみ

今まで下記のようなXHMLTコードでリストを表示させてました。

 class="leftbar" >
 class="leftNaviMenu">
 class="leftNaviList">aaa
 class="leftNaviList">bbb
 class="leftNaviList">ccc

CSS:

/*左側バー(サブメニュー領域)*/
div.leftbar    {
    border:1px;
    border-style:solid;
    border-color:gray;
    width:190px;
    float:left;
}
 
/*左側のサブナビメニュー*/
ul.leftNaviMenu{
    list-style-type : none;
    margin: 0px;
    left: 0px;
    padding:0px;
}
 
/*サブメニューの各項目*/
li.leftNaviList{
    list-style-type:none;
    width:100%;
    margin:0px;
}

この状態で空行のリストを追加したかったでそのまま

と、しましたがダメでした。

結局いろいろ試してみたところ li のスタイルに height と width を指定するだけでよかったみたいです。

ということで上記にスタイルに加え、空行用のスタイルを定義してみました。

XHTML:

 class="leftbar" >
 class="leftNaviMenu">
 class="leftNaviList">aaa
 class="leftNaviList">bbb
 class="leftNaviList">ccc
 class="leftNaviList_empty">
 class="leftNaviList">ddd

CSS:

/*空行用に追加*/
li.leftNaviList_empty {
    height:15px;
    width:100%;
}

なかなかHTMLはまだまだ慣れてないので試行錯誤の連続ですな。