如何在html下拉菜单中将部分文本与右侧对齐以标记子下拉菜单答案

【问题标题】：How to align partial text to right side in html dropdown menu for marking a subdropdown如何在html下拉菜单中将部分文本与右侧对齐以标记子下拉菜单
【发布时间】：2017-10-04 15:23:39
【问题描述】：

我想为子下拉菜单创建一个标记。我创建了以下内容；

我已经插入了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>

【问题讨论】：

你试过float: right这个图标吗？

标签： html css drop-down-menu font-awesome text-alignment

【解决方案1】：

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

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

.icon {
  float: right;
}

&lt;div class="listitem"&gt;List item&lt;i class="icon"&gt;Icon&lt;/i&gt;&lt;/div&gt;

【讨论】：