帮忙看下这个前端怎么写

Samding 发表于 2022-8-11 04:31

本帖最后由 Samding 于 2022-8-11 14:53 编辑

<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 发表于 2022-8-11 07:04

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

Liona 发表于 2022-8-11 07:34

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

小白白爱吃糖 发表于 2022-8-11 07:35

                     <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 发表于 2022-8-11 07:46

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

subney 发表于 2022-8-11 08:18

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

Justin0110 发表于 2022-8-11 08:54

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

a446489393 发表于 2022-8-11 08:59

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

Monklamn 发表于 2022-8-11 09:24

<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 发表于 2022-8-11 09:42

试试

<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>

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

帮忙看下这个前端怎么写