CSSでリストの間にだけ線を引く。

yotigory

12年前

HTMl

<p>【縦バージョン】</p>
<div class="mod_style01">
<ul>
<li><a href="#">サイトマップ</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<!--mod_mod_style01_end--></div>
<p>&nbsp;</p>
<p>【横バージョン】</p>
<div class="mod_style02">
<ul>
<li><a href="#">サイトマップ</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<!--mod_style02_end--></div>

CSS

/* mod_style01
-----------------------------------------*/
.mod_style01{
  width:300px; 
}
 
.mod_style01 ul{  
zoom: 1;  
overflow: hidden;  
}  
.mod_style01 ul li{  
margin-top: -1px;  
padding: 5px;  
border-top: 1px solid #666666;  
}  

/* mod_style02
-----------------------------------------*/
.mod_style02 ul {
  /*float: right;*/
  zoom: 1;
  overflow: hidden;
}
.mod_style02 ul li {
  display: inline;
  margin: 0 0 0 -1px;
  padding: 0 6px 0 6px;
  border-left: solid 1px #666;
}