不能在字段集</legend>的顶部设置<legend>

Question

我有一个字段集工作 - 这是代码：

                            <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中使用它，这就是它的外观以及我希望它在所有浏览器中的外观 - 这就是它在不同浏览器中的外观，例如。铬。

我非常感谢任何帮助:) 非常感谢你们！

• 非常感谢你。我知道我应该使用位置：绝对。我非常感谢帮助：＆gt;

Answer 1

试试这个css。我已经删除了！important的使用，因为它没有必要，如果您尝试在.css文件中稍后覆盖任何css，可能会导致问题。

我还将常见的样式组合在一起并使用了“绝对”的位置;＆＃39;像其他答案一样。

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*/
}

Answer 2

我在fiddler中更新你的CSS，看看是否可以

fieldset {
 display: table-cell;
 width: 100;
 border: 1px solid #808080 !important;
 border-radius: 5px;
 border-top-right-radius: 0 !important;
 background-color: #D3E1E5;
 position: relative;
 margin-top:25px;
} 
legend {
 width: inherit !important;
 padding: 0 5px !important;
 background-color: #D3E1E5;
 border-style: none none !important;
 text-align: right !important;
 border-left: 1px solid #808080 !important;
 border-right: 1px solid #808080 !important;
 border-top: 1px solid #808080 !important;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 margin-right: 25px !important;
 margin-top: -25px !important;
 position: absolute;
 right: 0;
}

    

Demo

Answer 3

试试这个：CSS中的一些解决方法可以解决您的问题

我将建议不要在CSS中使用负值，它肯定会导致跨浏览器问题，只有在您没有选项时才使用它。

   

 fieldset {
	display: table-cell;
	width: 100;
	border: 1px solid gray !important;
	border-radius: 5px;
	margin-top: 15px !important;
	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: 1px solid gray !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: -1px !important;
    margin-top: 2px !important;
    position:fixed;
    right:7px;
    top:0px;
}

<fieldset>
	<div>
		<legend>Signed In Users (220)</legend>                              
		<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>