illustratorでの字下げ方法を紹介しましたので、今度はCSSでのリスト表示方法のご紹介。使用頻度が高いと思われるULとDLで行う場合を書いています。
CSSの指定内容とサンプル
ULで字下げをしてリスト表示
ul {
margin:0 0 0 20px;
padding:0;
}
li {
margin:0;
padding:0 0 0.3em 6.5em;
list-style-type:none;
text-indent:-6.5em
}
li span{
padding:0 0.5em 0 0;
}
DLで字下げをしてリスト表示
dl {
margin:0 0 0 20px;
padding:0;
}
dt {
float:left;
margin:0;
padding:0 0 0.3em 0;
}
dd {
margin:0;
padding:0 0 0.3em 6.5em;
}
UL・OLでN型にリスト表示
.ol_list {
margin:0;
padding:0 0 0 30px;
width:370px;
}
.ol_list li {
margin:0 0 0 30px;
padding:0;
line-height:2em;
}
.ol_list .list1 {
margin-left:0;
}
.ol_list .list2 {
margin-left:200px;
}
.ol_list .clear {
margin-top:-8em;
}
DL+ULでDDをfloatしてリスト表示
#dl_list{
margin:0 0 0 20px;
padding:0;
width:600px;
}
#dl_list dt{
margin:0;
padding:0 0 0.5em 0;
}
#dl_list dd {
margin:0;
padding:0;
width:33%;
float:left;
}
#dl_list dd ul,
#dl_list dd li{
margin:0;
padding:0;
list-style-type:none;
}
ウィンドウのサイズを変更して確認して見て下さい。