下拉列表的必填字段 (*) 向下放置

Question

<div style="width: 50%; float:right">
<div id="formDiv">
<div class="control-group requiredStar">    
<label class="control-label"  for="CustNo">Customer No</label>
<div class="controls" >
<div id="replaceCustomerListDiv">
<s:select  data-rel="chosen" id="CustNo" name="CustNo" list="customerlist" listKey="id"           listValue="name" headerKey="0" headerValue="--SELECT--"  `enter code    here`onchange="getContracDetails(this.value)" cssClass="required"/>              
</div>  
</div>  
</div>
</div>   

这是我的代码，我必须在"客户编号"下拉菜单上方添加一个必填字段(*(，"必需的星星"是我与控制组一起添加的 CSS 实体以显示 asterix，但 asterix 向下放置(开始结束(，下面显示的是我的 CSS 类，有什么解决方案可以解决这个问题吗？

.control-group.requiredStar .controls:after {
 content:"*";
 color:red;
 font-family: 'Glyphicons Halflings';
/*  font-weight: bold;*/
/*  font-size: medium;*/
 font-size: 16px;
 position: relative;

vertical-align: top;

}

Answer 1

您可以在标签上设置所需的 Star 类，而不是像这样设置控制组：

.HTML

<label class="control-label requiredStar" for="CustNo">Customer No</label>

.CSS

.control-label.requiredStar:after {
  content:"*";
  color:red; 
}

这是一个新的小提琴：http://jsfiddle.net/8vpdd7r5/