如何给一个div右上角加一个删除图标

Question

<div class="layui-fluid layadmin-maillist-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layadmin-contact-box">
                <div class="layui-col-md4 layui-col-sm6">
                    <a href="javascript:;">
                        <div class="layadmin-text-center">
                            <img src="../../layuiadmin/style/res/template/character.jpg">
                            <div class="layadmin-maillist-img layadmin-font-blod">演员</div>
                        </div>
                    </a>
                </div>

                <div class="layui-col-md8 layadmin-padding-left20 layui-col-sm6">
                    <a href="javascript:;">
                        <h3 class="layadmin-title">
                            <strong>胡歌</strong>
                        </h3>
                        <p class="layadmin-textimg">
                            <i class="layui-icon layui-icon-location"></i>
                            上海
                        </p>
                    </a>
                    <div class="layadmin-address">
                        <a href="javascript:;">
                            <strong>Hu Ge studio</strong>
                            <br>
                            E-mail:[e-mail]
                            <br>
                            Weibo: https://weibo.com/hu_ge
                            <br>
                            <addr title="phone">Tel:</addr>
                            [phone]
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

整个HTML是这样的，如何在右上角添加一个删除图标，在线等。。

Answer 1

把下面“删除”2个字替换成你的删除图片

<div class="layui-fluid layadmin-maillist-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6" style="position:relative;">
            <div class="layadmin-contact-box">
                <div class="layui-col-md4 layui-col-sm6">
                    <a href="javascript:;">
                        <div class="layadmin-text-center">
                            <img src="../../layuiadmin/style/res/template/character.jpg">
                            <div class="layadmin-maillist-img layadmin-font-blod">演员</div>
                        </div>
                    </a>
                </div>

                <div class="layui-col-md8 layadmin-padding-left20 layui-col-sm6">
                    <a href="javascript:;">
                        <h3 class="layadmin-title">
                            <strong>胡歌</strong>
                        </h3>
                        <p class="layadmin-textimg">
                            <i class="layui-icon layui-icon-location"></i>
                            上海
                        </p>
                    </a>
                    <div class="layadmin-address">
                        <a href="javascript:;">
                            <strong>Hu Ge studio</strong>
                            <br>
                            E-mail:[e-mail]
                            <br>
                            Weibo: https://weibo.com/hu_ge
                            <br>
                            <addr title="phone">Tel:</addr>
                            [phone]
                        </a>
                    </div>
                </div>
            </div>
            <div style="position:absolute;top:10px;right:10px">删除</div>
        </div>
    </div>

</div>