UL LI リストソース

X)HTMLコード

<div id="information">

   <h2>新着情報</h2>

   <ul">

      <li><a href="index.html"><span>2011/01/20</span>新着情報です。</a></li>

      <li><a href="index.html"><span>2011/01/10</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>

      <li><a href="index.html"><span>2011/01/03</span>新着情報です。</a></li>

      <li><a href="index.html"><span>2011/01/01</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>

   </ul>

</div>

CSSコード

#information h2 {

   padding:3px;

   background:#ddd;

}



#information ul {

   margin:0;

   padding:0;

   list-style:none;

}



#information li {

   padding:15px 0 15px 7em;

   text-indent: -7em;

   border-bottom:1px solid #ddd;

}



#information li span {

   display:inline-block;

   width:7em;

   text-indent:0;

}



#information li a {

   text-decoration:none;

   color:#000;

}



#information li a:hover {

   text-decoration:underline;

   color:#AB0404;



}