Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
CSSでリストの間にだけ線を引く。 - CodingMania
CodingMania

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

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;
}
モバイルバージョンを終了