html - 如何在 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

添加一个类并在 css 中使用 float: right; 对我来说似乎是最好的方法。

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

.icon {
  float: right;
}

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