如何交换图标的 position 和<a>标签</a>的文本

Question

我的页面上有一个由我的文档生成系统创建的切换按钮。 生成的 HTML 是

<a href="#" ><img  src="toggleIcon" class="toggler"> toggle text</a>

在页面上，它通过左侧的切换图标 (>) 和右侧的切换文本呈现。 看起来像这样

 > toggle text

我需要使用 CSS 以便切换图标在右侧，所以看起来像这样

 toggle text >

我试着做

.toggler {
   float:right;
}

但这会将图标放在切换文本的左侧并重叠（在 z 中）（使用 Windows 10 Chrome）

我无法更改 HTML，我在切换文本上有一个 class，但在切换文本上没有 - 我该怎么做？

谢谢

Answer 1

由于您无法控制 HTML...

• 使您的<a>相对并添加填充作为图标的空间
• 使您的<img>绝对并向右移动

 a { display: inline-block; position: relative; padding-right: 30px; /* make space for the toggle icon */ outline: 1px solid red; /* just to see what we'rer doing */ } a img.toggler { position: absolute; right: 0; }

 <a href="#"><img src="//placehold.it/18x18/0bf" class="toggler"> toggle text</a>

不用说，您应该为上述 styles 使用父 class，否则您最终会更改页面上a每个元素。