问题标签 [sliding-doors]

我需要帮助来对齐 CSS 按钮。我尝试了许多不同的变体，但我无法按照我想要的方式将按钮居中。

首先，看看这个网址：http ://www.front-end-developer.net/cssbuttons/example.htm

我使用 2 个图像来形成一个按钮（这可以在 1 个图像上完成，但在这种情况下我们有两个）。只要我们应用float:left或float:right应用于父 div 元素，一切都会按预期工作，以“限制”div 的宽度并在 div 的内容结束后立即关闭它。您可以从按钮中删除 float:left 以了解我的意思。

但是中心位置的按钮呢？我不能添加浮动：左/右，因为我想将它对齐在中间。

理论上，我可以设置

我会得到你在这张照片上看到的东西：

_{（来源：前端开发者网）}

但我不知道里面文字的长度。有不同的翻译我的按钮可能很短，或者是那个长的 5 倍。

我也尝试使用<span>而不是<div>，但不幸的是嵌套的内联元素不正确地尊重它们的填充......

是的，我必须<a>在内部使用，以便网络爬虫可以访问按钮。

我真的坚持这个。

我使用了推拉门技术，在这里解释：

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

除了一个例外，我决定再添加一张图片来实现“悬停”效果。

我的代码适用于所有浏览器，除了 IE8（可能还有更早的版本）。

a.submit-button:active和a.submit-button:active 跨度被“悬停”简单地阻止并且永远不会工作。

有谁知道这个解决方案？

这是测试页面：http ://websvit.com/temp/button.html

提前非常感谢！

这是按钮：

替代文字 http://websvit.com/temp/button-1a.png 替代文字 http://websvit.com/temp/button-1b.png

有一种常见的做法是使用<a></a>标签来标记漂亮的按钮，通过 onlick 和 onhover 样式更改等。这在大多数情况下看起来和行为都很棒。

虽然结果是一个巨大的问题，这在开始时并不是很明显。问题是这些漂亮的“按钮”在中键单击时会打开新窗口，要么是空白的，要么与当前窗口具有相同的内容（取决于使用 # 还是 javascript:; 来禁用 href 部分）。

现在我有了 JavaScript RIA，上面有按钮，中键打开新窗口......跛脚......

起初我什至不明白为什么有时我会在浏览器中看到那些空白页面。

由于以这种方式使用链接是非常成熟的做法，也许有任何既定的方法来处理所描述的问题？

我有这个脚本：

http://jsfiddle.net/NV2uV/

它有效，但我不喜欢它。

缺点：

1. 扳手（边缘块）。
2. 在从一个单元到另一个单元的过渡中，动画分两步执行（我想要一个连续的动画）。
3. 脚本代码并不漂亮——非常重复。

简而言之 - 它看起来不太好。

如何改进脚本以查看动画并且对眼睛有好处（如果您有现成的解决方案 - 请告诉我）。

更新：

如果您将动画设置得更小 - 该动画看起来相当不错。

更新 2：

我找到了解决方案：在动画函数中必须添加设置“队列：假”，然后动画将不会一致地执行，而是同时执行。

http://jsfiddle.net/TthBy/

但我还是不喜欢我的剧本里有很多重复，怎么剪得漂亮呢？

我有一个菜单：

使用滑动门技术，我想创建我的按钮（底部包含圆角。）

通过将 a 和 li 悬停，我可以让它工作。但是 li 更大，如果我将鼠标悬停在 li 上，而不悬停 a，则仅显示 li 的背景图像。

现在我想知道是否有办法连接 li 的悬停和 css 中的 a 的悬停。我宁愿在不使用 javascript 的情况下解决这个问题。

谷歌搜索并没有进一步帮助我。我猜这是不可能的，但在尝试其他选择之前我想确定一下。

提前感谢您的任何建议/帮助/建议。

我正在尝试使整个链接居中，并且正在努力寻找解决方案。我为我的链接使用了一个简单的推拉门样式，我希望它成为中心。

这是一个您可以与之交互的演示：http: //jsbin.com/ibidu3

我正在尝试做一个可以通用的滑动门按钮，除了 Firefox 之外，一切都很好。按钮中的 span 元素在 FF 中总是低于 2px。

这是示例

http://jsbin.com/orami3/4

我有一个<a>标签，它使用 css 滑动门技术来显示翻转状态

问题在于 ie6 我得到背景图像的闪烁/闪烁，有什么解决办法吗？

谢谢，

J。

你好，

我有几个a使用滑动门的链接（），当我访问其中一个链接时，文本的颜色会改变。使用 firebug，我可以看到链接具有以下样式：

奇怪的是链接里面不存在<div id="SignInForm"></div>？这个问题在 FireFox 中显示，但在 IE8 中没有。

请看这里：http: //jsfiddle.net/snowman/ecWzz/

为什么链接会得到这种风格？

此致