如何确保按CSS颠倒的按钮均匀分布？

我有一个向导式的HTML表单，其中有一排用于后退/下一步/取消操作的提交按钮（按此顺序）。该表单还可以包含不同数量的输入字段，如文本字段，单选按钮，复选框，下拉列表（选择标签）和文本区。客户需要“下一步”按钮作为默认操作，以便如果用户键入文本字段并按下Enter键，则应提交表单，就好像他们点击了“下一步”按钮一样。如何确保按CSS颠倒的按钮均匀分布？

问题是，在这种情况下，浏览器（至少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中，取消按钮被阻塞在Next按钮上。

有谁知道我需要编织哪些CSS魔法才能让这三个按钮在两个浏览器中均匀分布？

（通过排序按钮下一页/返回/取消回避问题不是一个选项）

（也感谢大家谁提出基于JavaScript的解决方案，但不是所有的客户允许JS，所以它必须是一个直接的HTML和/或CSS解决方案）

这里就是我最后做的是工作很好（基于克莱的建议）：

<!-- 
<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）

来源

2009-03-04 Andrew Swan

个人而言，我更喜欢一个Javascript解决方案，它允许您将默认提交按钮更改为您选择的任何按钮。减少混乱并为您提供灵活性。 – cbp 2009-03-04 05:16:48

您是否考虑过使用this trick？基本上你只是首先出现一个隐藏的按钮，它执行所需的操作。

来源

2009-03-04 04:57:35 cletus

我试过类似的东西，但我会再给它一次，让你知道。与此同时，如果任何人都可以让我的原始方法始终看起来不错，那也会受到欢迎。 – 2009-03-04 05:01:43

该技巧可行，但会以某种方式影响某些用户。在IE中，当您单击文本字段时，第一个可见按钮（后退）周围会出现一个黑色边框，但按Enter键后，隐藏的下一个按钮将生效。所以它看起来像按回车键将返回，但它会继续。 – 2009-03-04 05:17:16

虽然这个伎俩并没有像现在这样运作，但它让我朝着正确的方向发展，所以这足以让我成为你的接受答案。我将添加我对问题所做的全部细节。 – 2009-03-04 23:49:02

你能不能定义一个样式

.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之间的几个像素差异。如果至关重要的是不会发生这种情况，您可以为按钮定义单独的边距。？

来源

2009-03-04 05:07:24 Jaanus

我摆弄了各种边距设置，但无法使它在两个浏览器中都能很好地工作。 – 2009-03-04 23:45:47

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

文档类型非常重要，以便页面以符合标准的模式呈现。如果没有它，页面将显示为怪异模式，这会使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>

来源

2009-03-04 07:18:18 Guffa

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

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

最后，添加JavaScript onclick处理的按钮，它首先隐藏字段的值设置为按下的按钮的名称，然后提交表单。

来源

2009-03-04 12:54:11

为什么你不只是浮动右取消按钮？

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

来源

2009-03-04 23:28:12 user73912

如何确保按CSS颠倒的按钮均匀分布？

回答

相关问题