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

使用一个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日

悬赏问题

  • ¥15 单片机配网,继电器开关,广播
  • ¥60 Qcustomplot绘制实时动态曲线
  • ¥20 运用matlab画x-y图
  • ¥15 用idea运行项目,运行tomcat报错:断言失败
  • ¥15 Sqlserver查询链接服务器数据问题
  • ¥15 Bibtex4Word 引用中文文献
  • ¥20 用opencv c/c++ 转换成灰度图,然后做一下直方图均衡,输出mp4文件
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池