crossline

▼display:inline▼

font-size:12px;line-height: 150%;

 

 

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;

}

f:id:ishuko:20140521111400p:plain

 

 

 

 

■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;

}

f:id:ishuko:20140521110858p:plain