背景图像在下拉列表中的文本右对齐

Question

基本上，我想要的结果如下所示，箭头与下拉列表中文本的右侧对齐。

但是我的箭头一直指向底部以显示最长的文字:(

请问我的解释是否还不够清楚，希望你们中的一些人能给我一些建议。 谢谢！

仅供参考：我使用white-space:nowrap; 防止断线。

 ul { list-style-type: none; margin:0; padding: 0; } ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;} ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; } ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;} ul.detailsec > li input.button:hover{ background-color: #313131;} ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; } ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; } ul.detailsec ul li.subdetail a{ background-color:#ededed; border-bottom:1px solid #d9d8d8; padding: 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none; } ul.detailsec ul li.firstrow a { padding: 8px 12px !important;} ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; } ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;} ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; } .arrow_menunav{ background: url('https://image.ibb.co/krCosk/arrow_menunav.png'); width:18px; height: 11px; float:right;} 

 <ul class="detailsec"> <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li> <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button"> <ul> <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li> <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li> <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li> </ul> </li> </ul> 

Answer 1

如果您不为此使用额外的元素，而是仅将背景应用于a元素本身，则这样会更容易...

 ul { list-style-type: none; margin:0; padding: 0; } ul.detailsec { float:left; width:auto; margin:0; padding:0; list-style-type:none;} ul.detailsec > li.maindetail { float:left; display:inline; position:relative; padding-left: 10px; } ul.detailsec > li input.button { background-color: #39007d; width: 103px; height: 30px; border: 0; color: #fff; cursor: pointer; font-size:12px;} ul.detailsec > li input.button:hover{ background-color: #313131;} ul.detailsec > li.maindetail:hover ul { visibility: visible; opacity: 1; transition-delay: 0s, 0s; } ul.detailsec li.maindetail ul { position:absolute; float:left; height:0; padding-top:1px; margin:0; right:0; visibility: hidden; opacity: 0; transition-property: opacity, visibility transition-duration: .4s, 0s; transition-delay: 0s, .4s; } ul.detailsec ul li.subdetail a{ background-color:; border-bottom:1px solid #d9d8d8; padding: 12px 37px 12px 12px; display: block; white-space:nowrap; color: #5f5d5d; font-size: 13px; font-weight: normal; font-weight:bold; text-decoration: none; background: #ededed url('https://image.ibb.co/krCosk/arrow_menunav.png') no-repeat top 50% right 10px; } ul.detailsec ul li.firstrow a { padding: 8px 12px !important;} ul.detailsec ul li.lastrow a { border-bottom:2px solid #b3b0b0 !important; } ul.detailsec ul li.smalltxt a{ font-size: 11px !important; color:#5f5d5d !important; border:none !important;} ul.detailsec ul li.subdetail a:hover { color:#36145f; font-weight:bold; text-decoration: none; } 

 <ul class="detailsec"> <li class="maindetail"><input class="search" name="search" type="text" value="" placeholder="Search"></li> <li class="maindetail"><input border="0" title="Login" type="submit" value="LOGIN" class="button"> <ul> <li class="subdetail"><a href="">Individuals<div class="arrow_menunav"></div></a></li> <li class="subdetail"><a href="">Reg Type (ROB/ ROC/ UENO)<div class="arrow_menunav"></div></a></li> <li class="subdetail lastrow"><a href="">Reg Type (Others)<div class="arrow_menunav"></div></a></li> </ul> </li> </ul>