html - 在一行中显示图标和文本，每行之间的间距相同

Question

请访问here , 右上角显示3个图标和文字

我想隐藏黑白第一个和第二个图标之间的差距，我还想在第三个图标之后显示文本:indian rupees。

float: right;
position: relative;
top: 29px;
z-index: 999;

请帮我找到解决办法。

提前致谢。

Answer 1

快速查看代码，图标的对齐方式有点偏离。对于更清洁更简单的解决方案，使用下面的伪代码，您只需执行类似这样的操作

<div id="topRightWrapper">
   <div class="miniIcons">search icon here</div>
   <div class="miniIcons">cart button here</div>
   <div class="miniIcons">person icon here</div>
   <div class="miniIcons">Currency text here</div>
</div>

然后您只需“向右浮动”“topRightWrapper”，并向左/向右浮动“miniIcons”。

然后，您可能需要稍微调整一下这些按钮的弹出功能，但调整幅度不要太大。

PS:进一步看@你的代码，你几乎在那里，但问题是货币文本/div 与其他图标不在同一个父包装器中。如果您按照我上面所说的相同方式放置它们，它将起作用。你可以在技术上用绝对定位等来做到这一点，但对于这么简单的事情来说那是一场噩梦。希望这会有所帮助。