© Style-5.net
 

CSSでli(リスト)を横並びに表示する方法

CSSを使いli(リスト)を横並びに表示する方法


tate111yoko

1.) liをfloatで浮かせて左に詰めていくことで横並びに見せる方法

例)

li{
float:left;
padding-right:1em;
}

li a{
background-color:#ccc;
} 

もしくは
2.)displayプロパティでinlineを指定し、inline要素に変換することで横並び見せる方法

例)
li{
display:inline;
padding-right:1em;
}

li a{
background-color:#ccc;
}