CSS fieldset宽度为父元素的100%

在本文中，我们将介绍如何使用CSS将fieldset元素的宽度设置为其父元素的100%。

阅读更多：CSS 教程

什么是fieldset元素？

fieldset>元素是HTML表单的一个包装容器，用于将相关的表单元素组合在一起。它常用于创建具有标题和边框的表单字段集。

<fieldset>
  <legend>联系信息</legend>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
</fieldset>

上述示例演示了一个包含姓名和邮箱输入字段的fieldset。现在，我们希望将这个fieldset的宽度设置为其父元素的100%。

使用CSS设置fieldset的宽度为父元素的100%

要将fieldset的宽度设置为父元素的100%，我们可以使用CSS的宽度属性。首先，我们需要将fieldset的display属性设置为块级元素，这样它才能够占据整个父元素的宽度。

fieldset {
  display: block;
  width: 100%;
}

上述CSS代码将fieldset元素的显示类型设置为块级元素，并将它的宽度设置为100%。这样，当fieldset元素位于任何父元素内时，都将自动填满其父元素的宽度。

示例

让我们看一下一个更完整的示例，其中fieldset的宽度设置为其父元素的100%。

<style>
  .form-container {
    width: 400px;
    margin: 0 auto;
  }

  fieldset {
    display: block;
    width: 100%;
  }

  legend {
    font-weight: bold;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
  }

  input[type="submit"] {
    margin-top: 10px;
  }
</style>

<div class="form-container">
  <form>
    <fieldset>
      <legend>联系信息</legend>
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" required><br>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" required><br>
      <input type="submit" value="提交">
    </fieldset>
  </form>
</div>

在上述示例中，我们使用了一个包含class为.form-container的容器来限制整个表单的宽度为400像素，并将其居中。fieldset元素的宽度设置为100%，这样它将自动填满其父元素的宽度。每个输入字段都设置了宽度为100%、内边距和外边距。

您可以在浏览器中运行上述示例代码，查看fieldset元素宽度设置为父元素宽度的效果。