按钮没有对齐HTML / CSS

Question

我的网页上的按钮有问题。

这是我进入全屏时的样子

当我点击下一个，然后返回到同一页面时，它会变成这个

无论我尝试什么，我都尝试过，当我点击下一步然后返回同一页面时，它们总是不对齐。

按钮的样式

    .button1{
    bottom: -70px;
    right:0px;
    position: absolute;
}

.button2{
    bottom: 28px;
    left:8px;
    position: absolute;
}

按钮

    </div>
    <div class="button1">
    <button type="submit" name="Next">Next</button>
    </div>

</form>

    <form action="Time.html">
    <div class="button2">
    <button type="submit" name="Next">Back</button> 
    </div>
    </form>

此外，您可以看到它们不属于同一种形式。

Next按钮所属的表单

.form1 {
    border: 8px solid #7B93F4;
    left:0;
    position: absolute;
    top: 43%;
    width: 98.9%;
    text-align:center;
}

有关如何解决此问题并防止这种情况发生的任何想法？

Answer 1

您可以稍微更改布局，浮动按钮：

＆＃13;

＆＃13;

char

＆＃13;

.cont {
  overflow: hidden;
}
.button1{
  float: left;
}

.button2{
  float: right;
}

＆＃13;

＆＃13;

＆＃13;

浮动比绝对位置更灵活。

Answer 2

您的HTML代码存在错误。编辑它以便它清楚。

这两个按钮包含在不同的表单元素中，这些表单元素堆叠在它们自身的顶部，因为它们是块元素。将它们放在相同的表单元素中，并使用下面的样式。

你应该尽可能避免绝对定位。我建议你漂浮按钮。

您的HTML可能看起来像这样

<form>
    <div class="button1">
        <button type="submit" name="Next">Next</button>
    </div>
    <div class="button2">
        <button type="submit" name="Next">Back</button> 
    </div>
</form>

和你的CSS一样

.form1 {
    /* your other codes */
    overflow: auto;
}

.button1{
    float: left;
}
.button2{
    float: right;
}

希望它有效。