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

效果

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

编辑记录

报告相同问题？

关注问题

使用一个css控制多个图片和按钮的位置 css html 前端
2021-12-31 15:50

回答 1 已采纳可以一个样式，控制多个图片，但是你的样式就不能这样写了。你可以这样写 <!DOCTYPE html> <html> <head> <meta cha
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'))
Web前端——用CSS的常用样式制作一个炫酷的按钮
2022-11-18 12:13

Q鑫的博客 border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right。...精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x：显示横向滑动条。
看下jqprint打印不了是怎么回事，另一个页面同样的内容和打印方式都能打印 js引入也没有问题 jquery layui 前端
2022-04-26 16:58

回答 1 已采纳没有报错信息吗
vue前端小更改，根据条件隐藏 elementui vue.js 前端
2022-05-24 12:21

回答 1 已采纳我记得上次我回答过 <!-- 这里看起来action没用了，所以我去掉了，如果有的话添加&& 连接，即 v-if="action != 'delivery' && action != 'add'
js调用函数，同一个函数穿不同参调用两次，只执行后一次 javascript 有问必答
2022-03-09 16:10

回答 3 已采纳 #####move_lr中已经清除掉计时器了，所以只有最后一个有效，该分别用2个计时器变量来记录自己的计时器，改下面就可以了 <style> * { padding
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
2021-07-25 20:02

海拥✘的博客今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源第 2 步 - 从 index.html 开始第 3 步 - 设置索引文件的样式...
前端tab中echarts饼状图无法点击的问题 css vue.js
2020-03-20 19:20

回答 1 已采纳切换导致事件出问题。尝试隐藏tab释放当前页饼图，显示tab重置当前页饼图
使用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;
前端必学的CSS制作Switch动画开关按钮演示
2023-02-16 15:03

言程序plus的博客随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮...
swiper轮播图使用v-if隐藏再显示后空白 html vue.js 有问必答
2022-08-07 16:28

回答 3 已采纳 v-if是重新生成dom，需要重新初话过一次swiper，就是window.onload中的代码放到一个函数里面，在显示的时候重新调用一次。比如下面这样，在v-if显示swiper的代码后面用next
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
2021-08-16 10:34

海拥✘的博客如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 ...
【html+css+js】用前端做一个视频播放器页面
2022-09-13 22:05

-李华同学-的博客初学前端的可以看一看，能看懂的话证明你前端入门了，如果没有看懂那还需努力。自己学习了两个星期的前端自认为前端不是很难，但是很考验人的设计能力，如果没有很高的审美，也同样做不出优秀的页面。
没有解决我的问题, 去提问