Html 按钮的位置不变

我开发了一个python后端，并试图为我的应用程序设计一个html和javascript前端。我是HTML新手

代码如下所示

html{
字体：普通14px/1.5新；
}
h1{
保证金：7雷姆；
边缘顶部：8rem；
}
形式{
保证金：3rem；
宽度：800px；
}
.form-IFS_数据位置{
字号：1rem；
宽度：100px；
位置：绝对位置；
左边距：400px
}
.form-IFS_数据位置按钮{
字体大小：0.7rem；
边界：无；
填充：0.5雷姆0.5雷姆；
颜色：白色；
背景颜色：矢车菊蓝；
光标：指针；
}
.form-PDF\u位置{
字号：1rem；
宽度：200px；
位置：绝对位置；
边缘顶部：10px；
}
.form-PDF_位置按钮{
字体大小：0.7rem；
边界：无；
填充：0.5雷姆0.5雷姆；
颜色：白色；
背景颜色：矢车菊蓝；
光标：指针；
}
.form-Output_位置{
字号：1rem；
宽度：200px；
位置：绝对位置；
边缘顶部：10px；
}
.form-Output_位置按钮{
字体大小：0.7rem；
边界：无；
填充：0.5雷姆0.5雷姆；
颜色：白色；
背景颜色：矢车菊蓝；
光标：指针；
}
.表格亮点{
字号：1rem；
宽度：200px；
位置：绝对位置；
边缘顶部：10px；
}
.表格突出显示按钮{
字体大小：0.7rem；
边界：无；
填充：0.5雷姆0.5雷姆；
颜色：白色；
背景颜色：矢车菊蓝；
光标：指针；
}

使用HTML表单
试验
订单
PDF图纸
输出
执行

让我们一步一步地看一遍

html无效。你必须关闭html中的所有标签（除了谷歌上的一些例外）。

div

和

center

未关闭。如果您使用像webstorm、eclipse或。。。（很多…）他们会从本质上显示你的错误。将html中的DIV想象成包装器，或是包含其中任何内容的盒子：

试验
订单

你让你的生活变得比需要的困难得多。在编写CSS时，不应该对html中的每个元素单独设置样式。相反，在CSS中，你会说：

我希望我所有的按钮都是cornflowerblue，文本大小为.7 rem

，然后在HTML中，你只需标记那些应该像按钮一样工作的元素。你的愿望将适用于他们：

/*说出你的愿望，并将你的愿望命名为.btn*/
.btn{背景色：矢车菊蓝；字体大小：.7 rem；}
/*另一个愿望，关于危险元素*/
.危险{颜色：红色；}

和html格式：

烧死小猫
喂小猫

除非必要，否则不要在css中使用

absolute

。在这种情况下，它不是！我相信你希望你的按钮在屏幕的左侧。想想不同的屏幕尺寸，手机屏幕，电视，活动页面打印在纸上。绝对会让你的生活陷入地狱。您还可以看到边距不适用于绝对元素。如果您希望按钮始终位于屏幕左侧，请将其父div固定

有时将相关的东西（如按钮）堆叠在一起（将它们包装在一个div中）是个好主意。但不要做得太多

因此，最后：

使用HTML表单
试验
订单
PDF图纸
输出
执行

以及：

在此处运行示例：

---

最后注意：您正在用class

form-IFS.

将

按钮包装到另一个
div
中。这可能是不必要的，您只需使用
按钮
元素即可。不过，您的里程数可能会有所不同
 将页边距顶部属性添加到按钮标记，并从其他类中删除所有其他页边距顶部属性

#form-user button{
      margin-top:10px;
  }

#form-user button{
      margin-top:10px;
  }