如何在HTML下拉菜單中將部分文本對齊到右側，以標記子圖片

Question

我想創建一個用於下拉菜單的標記。 我創建了以下內容;

我已經插入font-awesome的圖標，表示有下一層次的子菜單。這個圖標我想與右邊對齊，最佳路線是什麼？在CSS中添加一個類或只使用align="right"？

下面是代碼：

<div class="menuSection"> 
    <div class="menuItem" rendercondition="[Relatics.Portallink Sequence='410' Get='Visibility' ExpectedResult='Visible']"> 
     <div class="dropdown"> 
      <button class="dropbtn"><i class="fa fa-random fa-3x" aria-hidden="true"></i><br> [Relatics.Portallink Sequence='400' Get='Name']</button> 
       <div class="dropdown-content"> 
        <ul> 
         <li><a href="[Relatics.Portallink Sequence='410' Get='Url']" target="Main"><i class="fa fa-bolt fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='410' Get='Name'] <i class="fa fa-play-circle fa-1x"></a> 
          <ul> 
           <li><a href="[Relatics.Portallink Sequence='411' Get='Url']" target="Main"><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='411' Get='Name'] </a></li> 
           <li><a href="[Relatics.Portallink Sequence='412' Get='Url']" target="Main"><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='412' Get='Name'] </a></li> 
           <li><a href="[Relatics.Portallink Sequence='413' Get='Url']" target="Main"><i class="fa fa-list-ol fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='413' Get='Name'] </a></li> 
          </ul>      
         </li> 
         <li><a href="[Relatics.Portallink Sequence='420' Get='Url']" target="Main"><i class="fa fa-chain-broken fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='420' Get='Name'] <i class="fa fa-play-circle fa-1x"></a> 
          <ul> 
           <li><a href="[Relatics.Portallink Sequence='421' Get='Url']" target="Main"><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='421' Get='Name'] </a></li> 
           <li><a href="[Relatics.Portallink Sequence='422' Get='Url']" target="Main"><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='422' Get='Name'] </a></li> 
          </ul>      
         </li> 
         <li><a href="[Relatics.Portallink Sequence='430' Get='Url']" target="Main"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='430' Get='Name'] <i class="fa fa-play-circle fa-1x"></a> 
          <ul> 
           <li><a href="[Relatics.Portallink Sequence='431' Get='Url']" target="Main"><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='431' Get='Name'] </a></li> 
           <li><a href="[Relatics.Portallink Sequence='432' Get='Url']" target="Main"><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='432' Get='Name'] </a></li> 
          </ul>      
         </li> 
         <li><a href="[Relatics.Portallink Sequence='440' Get='Url']" target="Main"><i class="fa fa-puzzle-piece fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='440' Get='Name'] <i class="fa fa-play-circle fa-1x"></a> 
          <ul> 
           <li><a href="[Relatics.Portallink Sequence='441' Get='Url']" target="Main"><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='441' Get='Name'] </a></li> 
           <li><a href="[Relatics.Portallink Sequence='442' Get='Url']" target="Main"><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='442' Get='Name'] </a></li> 
          </ul>      
         </li> 
        </ul> 
       </div> 
     </div> 
    </div> 
</div> 

Answer 1

添加類和使用float: right;在CSS好像給我的最好方式。

.listitem { 
 
    background: yellow; 
 
    width: 200px; 
 
} 
 

 
.icon { 
 
    float: right; 
 
}

<div class="listitem">List item<i class="icon">Icon</i></div>