html - 无法在字段集顶部留出 <legend>

Question

我有一个 fieldset 工作 - 这是代码:

                            <fieldset>
                            <legend>Signed In Users (220)</legend>
                            <div>
                                <div class="new_user"><span>Welcome to the new user:&nbsp;<strong>Name_name</strong></span></div>
                                <div class="logusers">Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin, Admin</div>
                                <div class="ranks">
                                    Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins | Admins 
                                </div>
                            </div>
                        </fieldset>   

在 CSS 中:

fieldset {
display: table-cell;
width: 100;
border: 1px solid gray !important;
border-radius: 5px;
border-top-right-radius: 0 !important;
background-color: #d3e1e5 }
legend {
    width: inherit !important;
    padding: 0 5px !important;
    background-color: #d3e1e5;
    border-style: none none !important;
    text-align: right !important;
    border-left: 1px solid gray !important;
    border-right: 1px solid gray !important;
    border-top: 1px solid gray !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: -1px !important;
    margin-top: -9px !important;
}

我让它在 firefox 中工作，这就是它的外观以及我希望它在所有浏览器中的外观 - 这就是它在不同浏览器中的外观，例如。 Chrome 。

我真的很感激任何帮助:) 非常感谢大家!

• 非常感谢大家。我知道我应该使用 position: absolute。非常感谢您的帮助:>

Answer 1

试试这个 CSS。我已经删除了 !important 的使用，因为它不是必需的，并且如果您稍后尝试覆盖 .css 文件中的任何 css 可能会给您带来问题。

我还将常用样式组合在一起并使用“position:absolute;”就像其他答案所建议的那样。

fieldset, legend{
    border: 1px solid gray;
    background-color: #d3e1e5;
    border-radius: 5px;
    margin: 0px;
}
fieldset {
    border-top-right-radius: 0;
    margin-top: 20px; /*put a margin above the fieldset to leave space for the legend*/
    position:relative; 
}
legend {
    padding: 0 5px;
    text-align: right;
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    position:absolute; /*absolutely position the legend*/
    right:-1px; /*position the legend 1px to the right so that it overlaps the border*/
    top:-19px; /*position the legend 1px down from the top that it overlaps the border*/
}