Question

我一直在疯狂尝试让所选的选项与所有下拉选项一样左对齐。

我已插入'text-align：left;'在每个css选项中但无济于事。

我已经确定javascript代码必须对所选选项的对齐做一些事情但是在javascript中不够熟练以找到可能导致此问题的原因。

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/

CSS / Jquery选择框 - 选中的选项不能左对齐？

1 个答案: