[CSS]　list参考デザイン

CSSでリストを整形デザインサンプル

番号付きのリスト

<div id="list2">
   <ol>
      <li><p><em>The Netherlands</em> is a country in ...</p></li>
      <li><p><em>The United States of America</em> is a federal constitutional ...</p></li>
      <li><p><em>The Philippines</em> officially known as the Republic ...</p></li>
      <li><p><em>The United Kingdom</em> of Great Britain and ...</p></li>
   </ol>
</div>

#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#000;  }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#222; border-left: 1px solid #999;}
#list2 ol li p em { display:block; }

サンプルを元に実際にやってみました。

ネタ元はこちら

8 different ways to beautifully style your HTML lists with CSS

http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html

元々のCSSの設定でリストの下に間が空いてしまったので、一部修正しています。

フォントの設定は消しておいたほうが無難だと思います。