我有一个 fieldset 工作 - 这是代码:
<fieldset>
<legend>Signed In Users (220)</legend>
<div>
<div class="new_user"><span>Welcome to the new user: <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。非常感谢您的帮助:>
试试这个 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*/
}
我是一名优秀的程序员,十分优秀!