マーカーの付いたテキストリストを横並びにします

デモページへopen_in_new

HTMl

<div class="mod-List002">
<ul>
<li><a href="#">テキストリスト</a></li>
<li><a href="#">テキストリスト（マーカーつき）</a></li>
<li><a href="#">テキストリスト</a></li>
<li><a href="#">テキストリスト</a></li>
<li><a href="#">テキストリスト</a></li>
</ul>
<!-- mod-List002_end --></div>

CSS

.mod-List002 ul{
 margin:0;
 padding:0;
 list-style-type:none;
}
.mod-List002 ul li{
  display:inline-block;
/* width:150px;幅を指定したい場合はここへ*/
 padding:0 15px 0 10px;
 background:transparent url("listmaker002_red.gif") no-repeat left 0.2em scroll ;
 white-space: nowrap; /* IE6文章途中で折り返さない */
}
.mod-List002 ul li a:link    {color:#000; text-decoration:none;}
.mod-List002 ul li a:visited {color:#000; text-decoration:none;}
.mod-List002 ul li a:hover   {color:#000; text-decoration:underline ;}
.mod-List002 ul li a:active  {color:#000; text-decoration:underline ;}