Display Flex，我需要在文字后面放一个图标

Question

显示 Flex 错误

I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.

#autocomplete a {
        font-weight: bold;
        text-decoration: none;
        color: #111;
        padding: 0.2rem 0.5rem;
        border-radius: 20px;
        align-items: center;
        display: flex;
    }
    
#autocomplete .fa.fa-search {
    padding: 5px;
    float: left;
}

没有 Flex 和 content-aligin: center;

使用 Flex 和 content-aligin: center;

Answer 1

我的做法是这样的：

添加以下CSS定义：

#autocomplete a * {
  vertical-align: middle;
}

“粗体”文本位于 span 或类似元素之外。您还应该将其放入 <span>，以便应用正确的样式。

示例：

<a href="./search?q=abcdef&amp;source=autocomplete" data-index="1">
   <span class="nobold">abc</span>
   <span>def</span>
   <i class="fa fa-search"></i>
</a>

（def 周围的 span 是新的。）

解释：

1.中CSS定义中的*将使样式应用于所选元素及其所有children .因此，在 2. 中，您只需使用 span 添加一个匹配的“child”。我已经测试过了，它对我有用。

提示：我不知道您是否知道这种技术，但您始终可以使用浏览器的开发工具，以便在显示的页面中“即时”尝试此类操作。

Answer 2

您可以尝试使用“flex-direction: row-reverse;”它应该在应用了 display flex 的情况下反转容器内的项目。

祝你有愉快的一天，祝你好运

Answer 3

好的，我正在研究这个，Ori Guy 给我添加了一些想法，然后我编写了这个代码

justify-content: flex-end;
flex-direction: row-reverse;

看起来很有效:D

真的很感谢所有帮助过我的人！！谢谢 <3

Display Flex，我需要在文字后面放一个图标

Display Flex, I need to put an icon behind the text

html

css

flexbox

显示 Flex 错误