I have a fieldset, how can I position the legend inside a fieldset with a border? I want the border to go around the legend and not through the middle of it.
我有一个字段集,如何将图例放在带边框的字段集中?我希望边界绕过传说,而不是通过它的中间。
fieldset {
border: 0;
padding: 0!important;
margin: 0;
min-width: 0;
border: 1px solid red;
}
legend {
padding: 0!important;
}
<fieldset>
<legend>Title</legend>
</fieldset>
2 个解决方案
#1
20
One option would be to float the legend
element to the left:
一种选择是将图例元素浮动到左侧:
fieldset {
border: 2px solid #f00;
}
legend {
float: left;
width: 100%;
padding: 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to use an outline
rather than a border
:
另一种方法是使用轮廓而不是边框:
fieldset {
border: none;
outline: 2px solid #f00;
}
legend {
padding: 0.6em 0 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to absolutely position the legend
element relative to the parent fieldset
element. This is probably the least flexible approach.
另一种方法是将图例元素相对于父字段集元素绝对定位。这可能是最不灵活的方法。
fieldset {
border: 2px solid #f00;
position: relative;
padding-top: 2.6em; /* Displace the absolutely positioned legend */
}
legend {
position: absolute;
top: 0; left: 0;
padding: 12px;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
#2
0
A variation on the accepted answer (using SASS) which should work in all modern browsers (IE9+)
接受答案的变体(使用SASS)应该适用于所有现代浏览器(IE9 +)
fieldset {
> legend {
float: left;
+ * {
clear: both;
}
}
}
This will clear the next element after the float so you don't have to worry about your layout being messed up.
这将清除浮动后的下一个元素,因此您不必担心布局被搞砸了。
#1
20
One option would be to float the legend
element to the left:
一种选择是将图例元素浮动到左侧:
fieldset {
border: 2px solid #f00;
}
legend {
float: left;
width: 100%;
padding: 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to use an outline
rather than a border
:
另一种方法是使用轮廓而不是边框:
fieldset {
border: none;
outline: 2px solid #f00;
}
legend {
padding: 0.6em 0 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to absolutely position the legend
element relative to the parent fieldset
element. This is probably the least flexible approach.
另一种方法是将图例元素相对于父字段集元素绝对定位。这可能是最不灵活的方法。
fieldset {
border: 2px solid #f00;
position: relative;
padding-top: 2.6em; /* Displace the absolutely positioned legend */
}
legend {
position: absolute;
top: 0; left: 0;
padding: 12px;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
#2
0
A variation on the accepted answer (using SASS) which should work in all modern browsers (IE9+)
接受答案的变体(使用SASS)应该适用于所有现代浏览器(IE9 +)
fieldset {
> legend {
float: left;
+ * {
clear: both;
}
}
}
This will clear the next element after the float so you don't have to worry about your layout being messed up.
这将清除浮动后的下一个元素,因此您不必担心布局被搞砸了。