fieldset无边框、区块重叠及内容未显示问题求助

你的问题核心是第一个<fieldset>里的<select>标签未闭合，浏览器解析时会把第二个<fieldset>误判为第一个的子元素，直接导致所有显示异常——边框不渲染、段落被覆盖、板块无法分隔。

修复后的完整代码 #

<fieldset>
  <p>How do you like your eggs cooked?</p>
  <select id="dropdown">
    <option value="scrambled">Scrambled</option>
    <option value="bullseye">Bull's Eye</option>
    <option value="boiled">Boiled</option>
  </select> <!-- 补上这个缺失的闭合标签 -->
</fieldset>
<fieldset> 
  <p>How much do you like eggs?</p>
  <label for="verymuch" name="label-radio">
    <input type="radio" id="verymuch" value="verymuch" name="radios" checked>Very much 
  </label>
</fieldset>

确保fieldset显示边框的CSS补充 #

部分浏览器会默认重置fieldset的样式，如果你修复标签后边框还是不显示，添加以下CSS强制恢复并优化布局：

fieldset {
  border: 1px solid #ccc; /* 自定义边框样式 */
  padding: 1.2rem;
  margin: 1rem 0; /* 给区块之间添加间距，分隔更明显 */
}

修复后两个fieldset会被浏览器正确识别为独立板块，各自的内容正常显示，边框也会渲染出来，下拉框和单选框区域就能完美分隔。

内容的提问来源于stack exchange，提问作者kitarboii