无需使用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
相关产品推荐
相关产品推荐

