ボタンの個数分、横幅を均等に分割する


jQueryの.sizeでその要素の個数を取得できますので、

ボタンのliの個数を取得して、それが1つまりボタンがひとつのときは幅を500pxに、

そうでない場合つまりボタンが2つの場合は幅を250pxにするという指定をします。


$(function(){
var n_size = $("#btn li").size();
if(n_size == 1 ) {
$('#btn li').css('width','500px');
$('#btn li a').css('width':'500px');
}
else{
$('#btn li').css('width','250px');
$('#btn li a').css('width':'250px');
}
});

<ul id="btn">
<li><a href="#1">btn1</a></li>
</ul>

#btn {
height:64px;
margin:0 auto 16px;
clear:both;
text-align:center;
}
#btn li {
display:inline-block;
height:59px;
background:

  • webkit-gradient(linear, left top, left bottom, from(#333), to(black));
  • webkit-box-shadow: 1px 1px 1px white;
  • webkit-border-radius: 0.2em;
  • webkit-box-shadow: 3px 4px 5px #CCC;

}
#btn li a{
height:59px;
display:block;
text-decoration:none;
background-repeat:no-repeat;
}