You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无需使用fieldset标签,纯HTML实现类fieldset边框文本效果

纯HTML实现类Fieldset效果(无需<fieldset>和CSS)

如果不想用<fieldset>标签,也不想依赖CSS,仅用纯HTML实现标题压在边框上的类Fieldset效果,可以借助HTML原生的<hr>、<table>元素及属性来模拟。下面是实现代码,同时附上原生<fieldset>作为对比:

原生Fieldset(用于对比)

<fieldset>
  <legend>Fieldset 1 标题</legend>
  原生Fieldset示例
</fieldset>

纯HTML实现的类Fieldset效果

<!-- 顶部标题与边框线 -->
<div align="left">
  <!-- 标题左侧的短边框 -->
  <hr width="12" size="4" noshade align="left">
  <!-- 标题文本 -->
  <span>自定义类Fieldset</span>
  <!-- 标题右侧的长边框 -->
  <hr size="4" noshade align="left">
</div>

<!-- 带左右边框的内容容器 -->
<table border="4" cellpadding="8" cellspacing="0" frame="vsides">
  <tr>
    <td>
      <label for="shipping_name">姓名:</label><br>
      <input type="text" name="shipping_name" id="shipping_name">
      <br><br>
      <label for="shipping_street">街道:</label><br>
      <input type="text" name="shipping_street" id="shipping_street">
    </td>
  </tr>
</table>

<!-- 底部边框 -->
<hr size="4" noshade>

关键元素说明

  • <hr width="12" size="4" noshade>:生成标题左侧的短实心边框,width控制长度,size控制边框粗细
  • <table frame="vsides">:仅显示表格的左右边框,作为内容区域的侧边框;cellpadding控制内边距,模拟原效果的留白
  • 底部的<hr>:作为内容区域的底部边框,和上方的<hr>、表格边框组合成完整的边框结构

内容的提问来源于stack exchange,提问作者MOIA

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.09 14:05:23