【问题标题】:fieldset legend text-align right bug in firefoxFirefox中的字段集图例文本右对齐错误
【发布时间】:2013-03-14 12:05:48
【问题描述】:

有没有办法将 Firefox 中的字段集图例向右对齐?我以为这只是我的风格,但显然即使有一个在线示例,FF 字段集也会忽略 text-align: right:

http://www.quackit.com/html/tags/html_fieldset_tag.cfm(在 chrome 中工作)

【问题讨论】:

  • 您使用的是哪个版本的 Firefox?我在 FF4 中查看了上面的页面,并且文本对齐工作正常。
  • mm 我在 macosx 上使用 3.6。嗯,如果它在 ff4 上运行,就会提出一个有趣的问题
  • 在 WIN 上的 FF 3.6(便携式)上测试 - 适用于普通的 text-align: right;text-align:-moz-right; 但是,在 Linux 上,FF 似乎并没有显示元素对齐。

标签: css firefox fieldset


【解决方案1】:

在 CSS 中没有明显的方法可以做到这一点(特别是,CSS 根本无法真正描述图例/字段集样式,所以任何一个都可以工作的事实是一个奇迹),但 <legend> 有一个属性命名为align,您可以将其设置为right,如下所示:

<fieldset>
  <legend align="right">My stuff</legend>
</fieldset>

在 Firefox 中获得您想要的行为。我很惊讶有些人看到它在那个测试用例上是正确的;除了 align 属性和 direction: rtl 字段集外,没有规定在 Gecko 中对齐图例。

【讨论】:

【解决方案2】:

legendalign 属性自 HTML 4.01 起已被弃用。然而,使用 float: left;float: right; 对齐图例元素似乎在浏览器中运行得相当好,尽管您可能需要在图例元素之后的第一个元素上添加一些边距。

【讨论】:

  • 在 FF 中有点奇怪,但仍然可能是最好的解决方案。
【解决方案3】:

我发现,Firefox 支持这样的东西

text-align:-moz-right;

也许你可以试试这个 - 它可能会使文本对齐在旧版本的 FF 中工作。

【讨论】:

    【解决方案4】:

    我迟到了,但我通过谷歌找到了这个问题,并认为这可能对将来的某人有所帮助

    为了以任何你喜欢的方式水平放置图例,你所要做的就是将其width 属性设置为100%,然后将其子元素视为在单行块内

    因此,例如,如果您想将内容向右对齐,请执行

        label{
          width:100%;
          text-align:right;
        }
    

    当然,不要忘记注意标签的父宽度以避免任何不当行为

    【讨论】:

    • 问题不在于标签。如果应用于&lt;fieldset&gt;,此代码会弄乱字段集边框。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-25
    • 2018-12-08
    • 2012-10-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多