这个元素如何在页面上突出显示？

Question

在此页面上（您需要将产品添加到购物车以查看结帐字段）：https://www.wptasty.com/checkout

fieldset元素（“信用卡信息”）位于其容器的外面（灰色背景是容器）的一半：

part of checkout form where legend is sitting halfway outside its container

我最初认为这只是负的最高利润，但我找不到任何证据。我以为也许它是绝对定位的，但也找不到。

您能帮助我了解它的这种放置方式，以便撤消它并将其移回到完全位于其容器中的状态吗？

HTML：

<form>
    <fieldset>
        <legend>Credit Card Info</legend>
        <input>A variety of inputs</input>
    </fieldset>
</form>

谢谢！

Answer 1

“信用卡信息”显示在legend元素内，并且正在执行legend在字段集中的操作：它以居中对齐方式显示在其父fieldset的顶部边框内。这是legend的默认显示，这在HTML中有点特殊情况。

您可以使用float或absolute定位它，但是display之类的东西legend不能正常工作。