ボタンの個数分、横幅を均等に分割する
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;
}