gpt4 book ai didi

html - 如何确保 CSS 反转的按钮间距均匀?

转载 作者:行者123 更新时间:2023-11-28 13:52:40 24 4
gpt4 key购买 nike

我有一个向导式的 HTML 表单,其中有一排用于后退/下一步/取消操作的提交按钮(按此顺序)。表单还可以包含不同数量的输入字段,例如文本字段、单选按钮、复选框、下拉列表(选择标签)和文本区域。客户要求将“下一步”按钮作为默认操作,这样如果用户在文本字段中键入内容并按 Enter,则应该像单击“下一步”按钮一样提交表单。

问题是在这种情况下,浏览器(至少是 IE,这是我们 99% 的客户使用的浏览器)使用表单中声明的​​第一个按钮提交表单,正如您从上面的列表中看到的那样“返回”,而不是所需的“下一步”。

我读到的一个修复方法是以相反的顺序(即先下一步)声明后退和下一步按钮,然后使用 CSS 以正确的方式显示它们,如下所示:

<html>
<head>
<style type="text/css">
.formSubmitButtons {
direction: rtl;
float: left;
}
.formSubmitButtons input {
direction: ltr;
float: none;
}
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<input type="submit" name="btnCancel" value="Cancel">
<br/>Some text fields go here...
</form>
</body>
</html>

这在 Firefox 和 IE 中提供了所需的行为和按钮顺序,但是取消按钮相对于其他按钮的间距不一致。在 IE6 中看起来不错,但在 Firefox 3.0.5 中,取消按钮与下一步按钮挤在一起。

有谁知道我需要编织什么 CSS 魔术才能让这三个按钮在两个浏览器中均匀分布?

(通过对按钮“下一步”/“返回”/“取消”进行排序来避免此问题不是一种选择)

(也感谢所有建议基于 JavaScript 的解决方案的人,但并非我们所有的客户都允许 JS,因此它必须是直接的 HTML 和/或 CSS 解决方案)

以下是我最终所做的并且效果很好(基于 Cletus 的建议):

<!--
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1">
<input type="submit" name="btnBack" value="Back">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnCancel" value="Cancel">
-->

(忽略包装评论标签,它们只是让您可以看到 HTML)

最佳答案

您是否考虑过使用 this trick ?基本上,您只需先显示一个隐藏按钮即可执行所需的操作。

关于html - 如何确保 CSS 反转的按钮间距均匀?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/609250/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com