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

我想要达到的结果

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

神仙别闹 2021-12-31 15:58

关注

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

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

效果

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

报告相同问题？

关注问题

css3: animation多个元素平移 vue.js 前端动画
2022-12-27 13:13

回答 7 已采纳你要的是这样的吗？ <!DOCTYPE html> <html> <head> <meta charset="utf-8">
Datatables前端页面的一个难题（Server-side模式下） javascript jquery 前端
2021-10-25 17:54

回答 2 已采纳 initComplete: function (settings, json) {//加载完毕事件 eg.after($('#dvType'))
带 class 的第一个元素的 CSS 选择器 css
2010-04-26 22:51

回答 15 已采纳 This is one of the most well-known examples of authors misunderstanding how :first-child works. In
Web前端——用CSS的常用样式制作一个炫酷的按钮
2022-11-18 12:13

Q鑫的博客 border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right。...精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x：显示横向滑动条。
js调用函数，同一个函数穿不同参调用两次，只执行后一次 javascript 有问必答
2022-03-09 16:10

回答 3 已采纳 #####move_lr中已经清除掉计时器了，所以只有最后一个有效，该分别用2个计时器变量来记录自己的计时器，改下面就可以了 <style> * { padding
前端用vue 实现element ui 的tabs 超长自适应出现轮播箭头功能 css3 javascript vue.js
2021-05-22 00:54

回答 2 已采纳完工~ <style>#tab1,#tab2{width:400px;margin:20px auto} .tab{border:solid 1px #ccc;} .tab .
vue前端小更改，根据条件隐藏 elementui vue.js 前端
2022-05-24 12:21

回答 1 已采纳我记得上次我回答过 <!-- 这里看起来action没用了，所以我去掉了，如果有的话添加&& 连接，即 v-if="action != 'delivery' && action != 'add'
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
2021-07-25 20:02

海拥✘的博客今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源第 2 步 - 从 index.html 开始第 3 步 - 设置索引文件的样式...
怎么让两个静态网页之间实现数据传递 html
2022-11-09 18:28

回答 5 已采纳可以父传子，或者vuex
使用vue-cropper遇到的问题 typescript vue.js 前端
2022-02-26 17:23

回答 1 已采纳 https://www.npmjs.com/package/vue-cropper
html5 调试控制显示 html html5 前端有问必答
2021-12-01 17:18

回答 1 已采纳 function ClearSubmit(e){ if(e.keyCode == 13) { return false;
智能编程，一触即发：使用AIGC优化CSS——提升前端开发效率与质量
2024-07-25 16:45

程序边界的博客利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。...
如何使用CSS实现一个无限循环滚动的图片轮播效果
2024-09-06 23:20

DTcode7的博客通过本文的介绍，我们不仅学会了如何使用纯CSS实现无限循环滚动的图片轮播效果，还探讨了如何进一步增强轮播的交互性和响应性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以...
前端必学的CSS制作Switch动画开关按钮演示
2023-02-16 15:03

言程序plus的博客随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮...
如何使用CSS实现一个平滑滚动到页面顶部的效果
2024-09-06 02:34

DTcode7的博客在这个示例中，我们使用了媒体查询来根据不同屏幕尺寸调整按钮的位置，并且通过JavaScript来监听窗口大小的变化，动态调整按钮的位置。在这个示例中，我们使用了JavaScript来监听滚动事件，并在滚动距离大于200像素...
没有解决我的问题, 去提问