防止fieldset元素的边框通过legend元素 [英] Prevent the fieldset element's border from going through the legend element

问题描述

我有一个字段集，我如何将图例放在带边框的字段集中？

JSFiddle

  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.

JSFiddle

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屋！