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

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>

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

Background image align right of the text in the dropdown list

html

css

drop-down-menu

html-lists

nowrap