放置在链接之间时 Img 出现乱序

Question

我正在尝试创建一个在中间插入省略号的分页器。我的问题是省略号在行尾结束，而不是像我将它放在代码中那样在中间。我做错了什么？

<div>
    <div class="pagination">
        <a href="?page=1">1</a>
        <a href="?page=2">2</a>
        <a href="?page=3">3</a>
        <img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px">
        <a href="?page=13">13</a>
        <a href="?page=14">14</a>
        <a href="?page=15" class="active">15</a>
    </div>
    <p style="margin-left: 10px;">30 trades</p>
</div>

编辑：我也尝试设置 display: inline 和 display: inline-block 但它仍然出现在最后

<div class="pagination">
    <a href="?page=1" >1</a>
    <a href="?page=2" >2</a>
    <a href="?page=3" class="active">3</a>
    <img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px; display: inline;">
    <a href="?page=13" >13</a>
    <a href="?page=14" >14</a>
    <a href="?page=15" >15</a>
</div>

Answer 1

在我的电脑中，img 出现在第 4 位，我坚信你的锚以前的样式很好，这会干扰 img 的位置，我相信你的锚是使用 javascript 或 CSS 样式排序的

请检查您是否有这样的 CSS 样式，也为该样式添加 img 标签 CSS

{
      display: flex;
      flex-direction: row;
}

可能会像这个例子那样尝试手动下订单（可选）

:nth-child(1) { order: 2; }

Answer 2

.pagination,
.pagination img {
  float: none;
}

我认为你应该检查浮动属性。

放置在链接之间时 Img 出现乱序

Img appearing out of order when placed in between links

html

css

position

image