防止fieldset元素的边框通过legend元素 [英] Prevent the fieldset element's border from going through the legend element
本文介绍了防止fieldset元素的边框通过legend元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个字段集,我如何将图例放在带边框的字段集中?
fieldset {border:0; padding:0!important; margin:0;最小宽度:0; border:1px solid red;} legend {padding:0!important;}
< fieldset> < legend> Title< / legend>< / fieldset>
解决方案
一个选择是将 legend
元素浮动到左边:
fieldset {border:2px solid#f00;} legend {float:left;宽度:100%; padding:0; font-weight:bold;}
< fieldset& < legend>这是图例< / legend> < label>这里是一个输入元素:< input type =text/>< / label>< / fieldset>
/ div>
另一种方法是使用大纲
而不是 border
:
fieldset {border:none; outline:2px solid#f00;} legend {padding:0.6em 0 0; font-weight:bold;}
< fieldset& < legend>这是图例< / legend> < label>这里是一个输入元素:< input type =text/>< / label>< / fieldset>
/ div>
另一种方法是绝对定位图例
元素相对添加到父 fieldset
元素。这可能是最不灵活的方法。
fieldset {border:2px solid#f00;位置:相对; padding-top:2.6em; / *替换绝对定位的图例* /} legend {position:absolute; top:0; left:0; padding:12px; font-weight:bold;}
< fieldset& < legend>这是图例< / legend> < label>这里是一个输入元素:< input type =text/>< / label>< / fieldset>
/ div>
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>
解决方案
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>
这篇关于防止fieldset元素的边框通过legend元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆