XHTMLソース
<div id="footer">
<ul>
<li class="home"><a href="#">ホーム</a></li>
<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>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<p>Copyright © 2007 HTML Love Company. All rights reserved.</p>
<!-- #footer END --></div>
CSSソース
#footer {
clear: both;
width: 760px;
margin: 0 auto;
padding: 15px 0 50px;
text-align: center;
font-size: small;
background: url(img/bg.gif) repeat-x;
}
#footer ul {
margin-bottom: 15px;
}
#footer ul li {
display: inline;
margin-right: 3px;
padding-left: 7px;
border-left: 1px solid #999;
list-style-type: none;
}
#footer ul li.home {
padding-left: 0;
border-left: 0;
}
display: inline;で横に並べた場合の隙間を解消する方法
XHTMLソース
<ul>
<li class="home"><a href="#"> ホーム</a></li><!--
--><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><!--
--><li><a href="#">プライバシーポリシー</a></li><!--
--><li><a href="#">サイトマップ</a></li>
</ul>
