我正在尝试使用 jQuery ui 类共同创建列表。
问题是
<span class="ui-corner-all ui-icon ui-icon-plus"></span>
没有出现..它应该出现在右端。
JSFIDDLE: http://jsfiddle.net/bababalcksheep/MNe4s/
HTML:
<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content" >
<div class="ui-widget-content list-available">
<ul class="list available" style=" ">
<li class="ui-state-default">
<div class='handle ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
Epania
<a class="ui-state-default" href="#">
<span class="ui-corner-all ui-icon ui-icon-plus"></span>
</a>
</li>
</ul>
</div>
</div>
CSS
.ui-splitselect{font-size:.8em}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect div.list-selected{float:left;border:none;margin:0;padding:0}
.ui-splitselect div.list-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect ul.list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0}
.ui-splitselect li{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect li a{color:#999;text-decoration:none;display:block;float:left;cursor:pointer;padding:0}
.ui-splitselect li .handle{float:left;height:20px;border-top:0;border-bottom:0;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect li.ui-state-focus .handle{border:inherit;border-top:0;border-bottom:0}
.ui-splitselect .ui-widget-header{border:none;font-size:11px;margin-bottom:1px}
最佳答案
您好,您的问题出在 HTML 中,请在 <span>
中设置文本内容标记并赋予它属性 float:left
.我设置了一个名为 text
的类对于这个跨度并给出图标 float
向右。
查看此演示 http://jsfiddle.net/MNe4s/13/ 并提出任何问题。
关于jquery - ui-icon 不显示使用 jquery ui css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19638449/