Question

我正在使用<fieldsets>进行分组，但它总是在IDE中给我一条消息，说明<legend>丢失了。我决定尝试使用<fieldset>

模拟<div>.

.grid-select .group {
  border: 1px solid #d9d9d9;
  padding: 12px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  margin-bottom: 1.667em;
  position: relative;
  z-index: 89;
  padding-top: 1.667em;
}

这对我不起作用，因为<div>似乎没有包围我的字段集中的其他<div>元素，就像我使用<fieldset>时一样。

<fieldset>还有其他一些我没有的属性吗？

请注意，在.group内<div>显示：inline;和浮动：左

Answer 1

请注意.group内部有显示：inline;和浮动：左

这正是问题所在。浮动元素不会影响其父级的高度。换句话说，周围的div认为浮动元素不存在。一个很好的解决方法是将.group设置为overflow: hidden，这会导致它考虑所有子项的大小计算。

但legend元素是可选的。如果只有您的IDE抱怨它，请修复IDE。仅因为这个原因，您不应仅仅将fieldset替换为div。

什么是使<fieldset>完全包含它的内容的CSS属性？</fieldset>

1 个答案: