CSS/jquery selectbox - 選擇的選項不能對齊左邊？

Question

我一直在瘋狂嘗試讓選定的選項左對齊像所有的下拉選項。

我已經插入'text-align：left;'在每一個CSS選項，但無濟於事。

我已經決定JavaScript代碼必須做一些選擇選項的對齊方式，但我不夠精通javascript來找到可能導致此問題的原因。

代碼位於http://jsfiddle.net/X97cN/

CSS：

.ww-selectbox-div { margin-bottom:20px;margin-top:20px;} 
.ww-selectbox a{ text-decoration:none; font-family:Arial; font-size:13px; font-weight:bold;} 
.ww-selectbox .ww-select-area a span.center{ background-color:#fff; padding:5px 40px 5px 30px; border:1px solid #aaa; border-radius:5px; box-shadow:0 2px 3px #333; color:#444} 
.ww-selectbox .ww-select-area a:hover span.center, .ww-selectbox .ww-select-areaactive a span.center{background-color:#eee; background-image:-moz-linear-gradient(center top,#FFF,#eee 5px,#eee 5px,#eee); background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),color-stop(0.2,#eee),color-stop(0.5,#eee),to(#eee)); color:#777; box-shadow:0 2px 3px #555} 
.ww-selectbox .ww-select-areaactive a span.center{ border-radius:5px 5px 0 0} 
.ww-selectbox .ww-select-area a span.arrow{ border-left:1px solid #AAA; height:8px; margin:5px 0 0 -23px; padding:2px 0 2px 5px; position:absolute; width:8px; background:url("../images/navigation/arrow_bottom.png") no-repeat scroll 5px 2px transparent; z-index:99} 
.ww-selectbox .ww-select-areaactive a span.arrow{background:url("../images/navigation/arrow_top.png") no-repeat scroll 5px 2px transparent} 
.ww-selectbox .ww-select-options{ background-color:#FFFBD9; position:absolute; border:1px solid #aaa; border-top:none; margin-top:4px; border-radius:0 0 5px 5px; box-shadow:0 2px 3px #555; z-index:100} 
.ww-selectbox .ww-select-options ul{margin:0; padding:0} 
.ww-selectbox .ww-select-options ul li { list-style:none; } 
.ww-selectbox .ww-select-options ul li.option a{ color:#777; text-align:left; display:block; padding:5px 15px; border-bottom:dashed 1px #aaa} 
.ww-selectbox .ww-select-options ul li.option a:hover{ background-color:#FFF8BA} 
.ww-selectbox .ww-select-options ul li.option a.last{border:none; border-radius:0 0 5px 5px} 

的Javascript：（對不起，在http://jsfiddle.net/X97cN/格式化更好地看到）

(function(a){var m=function(b,h){var d=a(document.createElement("div")).addClass("ww-selectbox").insertBefore(b);d.append('<div class="ww-select-area"><a href="javascript:void(0);"><span class="center">'+b.find(":selected").text()+'</span><span class="arrow arrowdown"></span></a></div>');var f=a('<div class="ww-select-options" style="display:none;"></div>').appendTo(d),c=a("<ul />").appendTo(f),e="",i="",g=b.find("option");g.each(function(b,j){j=a(j);e=j.val()?j.val():j.text();i=b+1==g.length?'class="last"': 
"";c.append('<li class="option"><a href="javascript:void(0);" value="'+e+'" '+i+">"+j.text()+"</a></li>")});h.height>0&&c.height(h.height).css({"overflow-x":"hidden","overflow-y":"auto"});b.hide();return d},n=function(b,h,d){var f=a(b).find(".ww-select-area"),c=f.find("a"),e=c.find(".center"),i=a(b).find(".ww-select-options"),g=i.find("a"),l=function(a){c.width("").width(c.width());if(a.width>0&&c.width()>a.width){c.width("");var b=e.html().split("");e.html("");for(var d=0;c.width()+8<a.width&&d< 
b.length;)e.html(e.html()+b[d]),c.width("").width(c.width()),d++;e.html(e.html()+"...");c.width(a.width)}a=g.first().outerWidth()-g.first().width()+(i.outerWidth()-i.width());g.width(c.outerWidth()-a)};c.click(function(){f.hasClass("ww-select-areaactive")?k(f,i):i.slideDown("fast",function(){g.removeClass("last");g.filter(":visible").last().addClass("last");f.addClass("ww-select-areaactive")})});g.click(function(){e.html(a(this).html());g.show().removeClass("last");a(this).hide();k(f,i);h.find("option[value='"+ 
a(this).attr("value")+"']").attr("selected","selected");h.change();l(d)});a(b).mouseenter(function(){a(this).addClass("ww-select-active")}).mouseleave(function(){a(this).removeClass("ww-select-active")});g.filter(function(){return a(this).html()==h.find(":selected").text()}).hide();l(d)},k=function(a,h){h.slideUp("fast",function(){a.removeClass("ww-select-areaactive")})};a.fn.wwselect=function(b){a(this).each(function(h,d){var f={width:0,height:0},c=a(d);b&&a.extend(f,b);var e=m(c,f);n(e,c,f)});a("body").click(function(){a(".ww-selectbox").each(function(b, 
d){a(d).hasClass("ww-select-active")||k(a(d).find(".ww-select-area"),a(d).find(".ww-select-options"))})})}})(jQuery); 

Answer 1

這個怎麼樣？

.ww-selectbox .ww-select-area a span.center { 
padding:5px 40px 5px 12px; 
/* ... */ 
} 

小提琴這裏：http://jsfiddle.net/X97cN/1/