Question

我在我的表单中的每个字段集的规则之前放置::但是它们似乎被置于字段的图例下，而不是像我期望的那样第一个孩子。我希望::之前的内容与图例的顶部对齐，而不是输入元素的顶部。因为我的传说是不同的高度，所以仅在整个板上垂直移动:: before内容是不够的。有谁知道为什么会这样，以及如何得到我想要的行为？

预期行为：

before    legend
          legend
          legend

          input

HTML：

<form>
    <fieldset>
        <legend>This is the legend.</legend>
        <input type="text" />
    </fieldset>
    <fieldset>
       <legend>This is a very very very very very very very very very very very very very very very very very very very very very long legend.</legend>
       <input type="text" />
    </fieldset>
</form>

CSS：

fieldset
{
    margin-left: 40px;
    width: 120px;
}

fieldset::before
{
    margin-left: -40px;
    float: left;

    content: "before";
}

http://jsfiddle.net/GYzTA/2/

编辑：

我发现只是更改CSS选择器的“doh”解决方案，但我仍然很好奇为什么fieldset :: before规则似乎在图例之后插入内容。

fieldset legend::before
{
    margin-left: -40px;
    content: "before";
}

Answer 1

引用Default CSS values for a fieldset <legend>

简单地说，跨浏览器不可能将LEGEND元素放在Fieldset中。

解决方案：使用<span>代替<legend>

如何在图例的规则帐户之前设置fieldset ::？

1 个答案: