▼display:inline▼
liは、floatでなくても横並びに出来ます★
『 inline 』を使います!!
▼やり方
div#footer(BOX)にulでli書き出す
■HTML■
<div id="footer">
<p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p>
<ul class="nav">
<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 class="last"><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /#footer -->
■CSS■
#footer {
color: #FFF;
background: #333;
padding: 20px;
height: 120px;
}
#footer p {
color: #CCC;
font-size: 12px;
text-align: center;
margin: 20px auto;
}
#footer ul.nav {
width: 960px;
font-size: 13px;
}
#footer li a:link, #footer li a:visited {
color: #FFF;
padding: 0 8px;
border-right: 1px solid #FFF;
}
#footer li a:hover {
color: #FC0;
}
#footer li.last a {
border-right: none;
}
■SCC■~display:inline~
#footer {
color: #FFF;
background: #333;
padding: 20px;
height: 120px;
}
#footer p {
color: #CCC;
font-size: 12px;
text-align: center;
margin: 20px auto;
}
#footer ul.nav {
width: 960px;
font-size: 13px;
text-align: center;
}
#footer ul.nav li {
display: inline;
}
#footer li a:link, #footer li a:visited {
color: #FFF;
padding: 0 8px;
border-right: 1px solid #FFF;
}
#footer li a:hover {
color: #FC0;
}
#footer li.last a {
border-right: none;
}