我有一个字段集,如何将图例放置在带有边框的字段集中?我希望边框环绕图例而不是穿过图例的中间。
fieldset {
border: 0;
padding: 0!important;
margin: 0;
min-width: 0;
border: 1px solid red;
}
legend {
padding: 0!important;
}
<fieldset>
<legend>Title</legend>
</fieldset>
最佳答案
一种选择是将 legend
元素 float 到左侧:
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>
另一种方法是使用 outline
而不是 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>
另一种方法是绝对定位 legend
元素 relative 到父 fieldset
元素。这可能是最不灵活的方法。
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>
关于html - 防止 fieldset 元素的边框穿过图例元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29652337/