ボタンの個数分、横幅を均等に分割する
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> <!-- <li><a href="#2">btn2</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; }