Question

我有一个向导式的HTML表单，其中包含一行提交按钮，用于Back / Next / Cancel操作（按此顺序）。表单还可以包含不同数量的输入字段，例如文本字段，单选按钮，复选框，下拉列表（选择标记）和textareas。客户需要“下一步”按钮作为默认操作，因此如果用户键入文本字段并按Enter键，则应提交表单，就像他们单击“下一步”按钮一样。

问题在于，在这种情况下，浏览器（至少是IE，这是我们99％的客户使用的）使用表单中声明的第一个按钮提交表单，从上面的列表中可以看出“返回”，而不是“下一步”。

我读到的一个修复是以相反的顺序声明Back和Next按钮（即Next first）然后使用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魔法才能让这三个按钮在两个浏览器中均匀分布？

（通过排序按钮Next / Back / Cancel不是一个选项来避免问题）

（也感谢所有建议使用基于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）

Answer 1

您是否考虑过使用this trick？基本上你只需要一个隐藏的按钮，它会首先显示所需的动作。

Answer 2

你能定义一种风格

.btnMargin {
    margin-left:5px;
    margin-right:5px;
}

只需将其应用于按钮

即可

<input type="submit" name="btnNext" class="btnMargin" value="Next">
<input type="submit" name="btnBack" class="btnMargin" value="Back">
...
<input type="submit" name="btnCancel" class="btnMargin" value="Cancel">

如果你拥有相同的风格，它似乎会产生Next / Back和Back / Cancel之间的几个像素差异。如果不会发生这种情况至关重要，您可以为按钮定义单独的边距。？

Answer 3

这将按下后面的按钮，接下来，取消订单，紧挨着彼此。唯一的缺点是你必须在第一个按钮容器上设置一个特定的宽度，使其在IE7中工作。没有它在Firefox和IE8中工作正常。

doctype很重要，因此页面以符合标准的模式呈现。如果没有它，页面将以怪异模式显示，这使得IE显示具有完全不同间距的表单元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
    .formButtons { float: left;  }
    .formSubmitButtons { width: 120px; }
    .formSubmitButtons input { float: right; }
    .formFields { clear: both; }
</style>
</head>
<body>
    <form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
    <div class="formButtons formSubmitButtons">
        <input type="submit" name="btnNext" value="Next">
        <input type="submit" name="btnBack" value="Back">
    </div>
    <div class="formButtons">
        <input type="submit" name="btnCancel" value="Cancel">
    </div>
    <div  class="formFields">
        Some text fields go here...
    </div>
    </form>
</body>
</html>

Answer 4

按下type =“button”而不是type =“submit”。然后，添加一个隐藏字段，例如：

<hidden name="continue" value="Next"/>

最后，在按钮上添加javascript onclick处理程序，首先将隐藏字段的值设置为按下按钮的名称，然后提交表单。

Answer 5

为什么你不直接浮动取消按钮？

如果它只是一个firefox问题，你可以使用像这样的属性选择器输入[name =“btnCancel”] {float：right;}或margin-left或任何你想要的。否则只需在输入上使用类。

如何确保CSS反转的按钮均匀分布？

5 个答案: