如何将< legend>元素 - 使用什么而不是align：center属性？ [英] How to center the <legend> element - what to use instead of align:center attribute?

问题描述

我在这里缺少什么？

编辑，因为在注释中无效：

Edit, because this doesn't work in a comment:

以下解决方案导致：

----------------------------------------------------
|                                                  |
|                     Legend text                  |

但我要做的是：

----------------------Legend text-------------------
|                                                  |
|                                                  |

编辑＃2：

根据到目前为止的反馈，听起来像这个整个< legend> 标签是一个丢失的命题。有没有人有一个例子，他们用什么来代替这个 - 具有相似的外观，更可靠？

Based on the feedback so far, it is sounding like this whole <legend> tag is a losing proposition. Does anyone have an example of what they use in lieu of this--something that has a similar appearance that is more reliable?

推荐答案

假设您的标记看起来像这样：

Assuming your markup looks something similar to this:

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

您的CSS应该看起来像这样：

Your CSS should look something like this:

legend {
    margin:0 auto;
}

这是最简单的

哦，亲爱的...你已经选择了CSS中最困难的事情，当谈到跨浏览器兼容性。 Cameron Adams表示最好

Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best

在
样式语义表单中唯一的困难是传说
标签。它是不可能的变量
跨浏览器。在Mozilla中，
legend标记不是从
缩进到字段集的正文，在IE和
Opera它是。在Mozilla中，图例
标签位于
字段集的边框和其内容之间，
IE和Opera位于
内部。这使得
移动字段集
边框内的图例变得非常困难，或者将其定位到字段集左侧的
，因为你获得
在浏览器之间变化的效果

Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset's border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers

您可以在使用CSS的花式表单设计如何设置表单样式。

You can read more about what he said at Fancy Form Design Using CSS on how to style forms.

我的解决方案是完全删除字段集边框并绝对定位图例元素。你想做什么的问题是它在每个浏览器都不同。

My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.

这篇关于如何将< legend>元素 - 使用什么而不是align：center属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！