GPIO2MHz 2021-12-31 15:50 采纳率: 100%
浏览 61
已结题

使用一个css控制多个图片和按钮的位置

问题相关代码，请勿粘贴截图
.move{
    margin-top:25px; width:500px; height:auto; position:absolute;
    top:220px;
    left:425px;
    float: left;
    position: fixed;
}

img{     
    position:absolute;   
    left:400px;
    top:100px;

}

<div class="helmet1">
    <img src="../static/images/helmet1.png" width="120" height="120" />
</div>

<div class="move">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
        <button class="btn btn-default" type="submit">设备ID</button>
    </a>
</div>
我想要达到的结果

img

  • 写回答

1条回答 默认 最新

  • 神仙别闹 2021-12-31 15:58
    关注

    img

    可以一个样式，控制多个图片，但是你的样式就不能这样写了。
    你可以这样写

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul,li {
            list-style-type:none;
        }
        li {
            float:left;
            text-align:center;
            margin:0px 20px auto 20px;
        }
        .move {
            margin-top: 25px;
           /* width: 500px;*/
            height: auto;
            /*position: absolute;*/
         /*   top: 220px;
            left: 425px;*/
          /*  float: left;
            position: fixed;*/
        }

        img {
           /* position: absolute;
            left: 400px;
            top: 100px;*/
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="helmet1">
                <img src="../static/images/helmet1.png" width="120" height="120" />
            </div>

            <div class="move">
                <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                    <button class="btn btn-default" type="submit">设备ID</button>
                </a>
            </div>
        </li>
        <li>
            <div class="helmet1">
                <img src="../static/images/helmet1.png" width="120" height="120" />
            </div>

            <div class="move">
                <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                    <button class="btn btn-default" type="submit">设备ID</button>
                </a>
            </div>
        </li>
        <li>
            <div class="helmet1">
                <img src="../static/images/helmet1.png" width="120" height="120" />
            </div>

            <div class="move">
                <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                    <button class="btn btn-default" type="submit">设备ID</button>
                </a>
            </div>
        </li>
    </ul>

</body>
</html>

    效果

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 1月8日
  • 已采纳回答 12月31日
  • 创建了问题 12月31日

悬赏问题

  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中，怎么实现库存管理系统，或独立模块设计与AGV小车对接？开发方面应如何设计和开发？请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取，哪一步错了？
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题：我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格