不对齐HTML/CSS的按钮

-1

我的网页上的按钮出现问题。不对齐HTML/CSS的按钮

这是他们看什么，当我进入全屏喜欢

当我点击下一步，然后回到这个相同的页面，然后它变成这个

我想不管我怎么努力当我点击下一页并返回到同一页面时，它们总是最终不对齐。

按钮

.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; 
}

我如何能解决这个问题，并防止这种情况发生的任何想法的形式？

来源

2017-06-27 Jopeth Deza

从两个按钮类中删除底部并尝试使用 – ISHIDA

@ISHIDA它没有修复它，“后退”按钮到达屏幕的左上角，而“下一步”按钮仅向上移动了几英寸 –

你可以改变的布局一点，浮动按钮：

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

 
.button2{ 
 
    float: right; 
 
}

<div class="cont"> 
 
    <button class="button1">button1</button> 
 
    <button class="button2">button2</button> 
 
</div>

浮动更加灵活然后定位绝对的。

来源

2017-06-27 00:55:14 itacode

I已经尝试了您的解决方案，但现在我的按钮位于文本后面，我无法点击它们。 –

修复了布局，现在它工作正常，非常感谢你 –

您的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; 
}

希望工程。

来源

2017-06-27 01:01:07

它的工作，我已经修复布局非常感谢你 –

不对齐HTML/CSS的按钮

回答

相关问题