帮忙看下这个前端怎么写

Samding

[HTML] 纯文本查看 复制代码

<h6 class="mt-1">
                        <a href="/logout" class="btn btn-light btn-sm">
                            <img style="width: 2rem;margin-top: -5px" class="mr-1" src="../../images/index/logout.svg">
退出登录
                        </a>
                        <img style="width: 2rem;margin-top: -5px" class="mr-1" src="../../images/index/user_icon.png">用户-1
                   </h6>

我想让<a>里面的图片和文字靠近一点要怎么写，就是紫色框那里，<a>的范围有点大最好也能对应缩小一点
前端没怎么学求大佬看一下

Loker

看看mr-1的样式里面有没有margin，让它的margin-right小一点就可以了

Liona

同意楼上，如果没有就直接添加这个属性 margin padding 可以都试试

小白白爱吃糖

                        <a href="/logout" class="btn btn-light btn-sm">
<span>
                            <img style="width: 2rem;margin-top: -5px" class="mr-1" src="../../images/index/logout.svg">
退出登录
</span>
                        </a>
再套一层 不过你要额外写样式让他俩平行

4LoveU

直接给a标签添加一个padding就好啦

subney

怎么觉得用了tailwindcss
右边太宽, 把mr-1去掉

Justin0110

要实现效果，可以尝试：
1、文字跟图片同行，不折行，相隔距离能缩进
2、tailwind mr-1 取消
3、检查a标签样式 是否有定宽，flex    justify-content

a446489393

浏览器里F12 检查一下是什么导致的距离变宽啊。

Monklamn

<a href="/logout" class="btn btn-light btn-sm">
                            <img style="width: 2rem;margin-top: -5px" class="mr-1" src="../../images/index/logout.svg">退出登录
</a>

退出登录不要换行

RootPotence

试试

<h6 class="mt-1">
                        <a href="/logout" class="btn btn-light btn-sm" style="display:flex;justify-content:center;align-items:center;">
                            <div style="width: 2rem;margin-top: -5px;overflow:hidden;"><img style="width:100%;object-fit:cover;" class="mr-1" src="../../images/index/logout.svg" /></div>
退出登录
                        </a>
                        <img style="width: 2rem;margin-top: -5px" class="mr-1" src="../../images/index/user_icon.png">用户-1
                   </h6>