需要帮助在我的文本右侧定位图标

Posted 2023-03-06

【中文标题】需要帮助在我的文本右侧定位图标

【英文标题】：Need assistance positioning icon to the right of my text

【发布时间】：2021-07-14 06:36:11

【问题描述】：

我无法将图标与数量右侧对齐。当我尝试 float:right 时，它将图标定位在单元格的最右侧，而不是靠在文本上。有没有办法让它在文本的右边但正好相反？对此的任何帮助将不胜感激。

            <div>
                <th class="fd-table--header-cell" [innerhtml]="quantity | fdContent"></th>
                <div class="myclass">
                    <a [attr.id]="mySelector"
                        [attr.aria-describedby]="myTooltip" href="javascript:void(0);"
                        class="fd-tooltip-layer--selector">

                        <help-icon [helpIconId]="myHelpIconId" [content]="pageDataContent"
                            aria-label="icon" [title]="quantity"></help-icon>
                    </a>
                </div>
            </div>


.myclass 
float: right;

【参考方案1】：

只需使用flexbox，并将display:flex 添加到两个HTML 元素的父级。

将父元素设为flexbox container，其直接子元素将被视为flex elements。 Flexbox默认方向即flex-direction是row，所以它会使flex elements对齐left to right。

.container 
  display: flex;
  align-items: center;

<div class="container">
  <strong>quantity</strong>
  <a href="http://google.com">google</a>
</div>

【参考方案2】：

这可以使用 Flexbox 解决。请尝试以下操作：

创建一个类：

.container 
    display: flex;

将其添加到父 div：

<div class="container">
   <th class="fd-table--header-cell" [innerHTML]="quantity | fdContent"></th>
   <div class="myclass">
      <a [attr.id]="mySelector"
      [attr.aria-describedby]="myTooltip" href="javascript:void(0);"
      class="fd-tooltip-layer--selector">
      <help-icon [helpIconId]="myHelpIconId" [content]="pageDataContent"
      aria-label="icon" [title]="quantity"></help-icon>
      </a>
   </div>
</div>

添加适当的间距：

.myclass 
  margin-left: 5px;