个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个向导式的 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
我有以下对象: dog = { location: { x: 52.1089, y: 16.2323 }, f: function(message) { alert
在 TSQL 中，如果我要搜索有效的 .com 电子邮件地址，我需要确保有一个 @ 符号，它以 .com 结尾，并且在 @ 前后至少有一个字符。 SELECT * FROM CUSTOMER WHER
我正在尝试准备一个信用卡交易列表，以便在 Excel 2010 中进行透视和进一步分析(满足个人需求)。问题是我的银行机构没有遵循标准的日期格式，所以有时日期会显示为 Jun. 1, 2013 , 有
看来您不能在 riak 中进行交易。如何确保数据正确？ 假设我们要插入评论。在 redis 我会做 commentId=incr commentCount multi SET comment_post
对于下面给定的模式，是否可以确保至少一个属性包含一个值(即 minLength 为 1): { "$schema": "http://json-schema.org/draft-04/sche
我计划在 Haxe 的一个子集中编写 Haxe 库，这些库将编译为每种 Haxe 目标语言。有什么方法可以验证 Haxe 程序是否可以编译为所有目标语言，是否可以在不手动测试每个目标平台上的编译代码的
如果浏览器窗口未聚焦，则当前页面上的所有 webdriver 标识都失败。 如何使用 webdriver 使浏览器成为焦点？ 最佳答案 ((JavascriptExecutor) webDriver)
我从这样的 HTML GET 请求中获取图像链接... www.example.com?image=www.anotherdomain.com/image.jpg if (isset($_GET['i
我有一个 eunit 测试，它生成一个唯一的节点名称并开始分发: {A,B,C} = now(), Nodename = list_to_atom(lists:flatten(io_lib:forma
我正在完成我的 iPhone 应用程序。我只是担心我们的网络服务器级别的安全性。数据通过网络服务被传送到 iPhone 应用程序。 我可以在网络服务上采取哪些安全措施，以免受到攻击？ 谢谢 最佳答案
我正在编写一个应用程序，该应用程序启动一个运行简单 Web 服务器的子进程。我正在使用 NSTask 并通过管道与其进行通信，一切看起来或多或少都很好。但是，如果我的程序崩溃，子进程将保持事件状态，并
我有一些应用程序，我调用 ShowMessage('Complete!');在长时间操作结束时。 大多数时候，这效果很好，但每隔一段时间，消息对话框就会显示在主窗体后面。 有什么方法可以确保 Show
我通过将消息插入集合并让模板使用 {{#each}} 打印出集合来创建一个简单的聊天。 我不太熟悉安全性，但是有没有办法让它符合 EFF 规定？ https://www.eff.org/secure-
我有一个商店，我想在其中正确管理 id。假设我有以下帖子存储: type Post = { id: number; title: string; body?: string; } type
我有一个使用 ajax post 方法和数据表的程序。经过几周的摆弄，我确定我根本不明白 javascript 是如何工作的。这是我的 JavaScript: $('#SaveTimeSheet').
我有一个系统，如果从 Azure 服务总线丢失消息将是一场灾难，也就是说，数据将永远丢失，并且没有实际方法可以在不造成重大中断的情况下修复损坏。 在这种情况下我可以完全依赖 ASB 吗？ (即使它
如何确保 scalatest 测试不会并行运行？在 0.12 之前，我有一个 sbt 设置: parallelExecution in Test := false 新版本引入了一些复杂的机制。这种更简
我的端点有两个如下所示的 promise : request.post({ url: url, json: smsSTART, header
简短版本 当 ui-router 转换到新 View 时(以我不完全理解的方式使用 ngAnimate)，它会添加类 ng-leave 和 ng-leave-active 到当前 View 。它还将类
目前正在努力寻找验证 2 个表的方法(有效地验证表 A 的大量行) 我有两张 table 表A ID A B C 表格匹配 ID Number A 1 A 2 A 9 B 1
我是一名优秀的程序员,十分优秀！