HTML代码中fieldset框线内嵌标题排版-html教程-PHP中文网

fieldset 的 legend 默认半嵌入边框是规范行为，非 bug；需用 position: relative/absolute 配合 width: max-content 和 background 覆盖边框实现美观内嵌，同时保留语义与无障碍支持。

html代码中fieldset框线内嵌标题排版

fieldset 默认边框与 legend 重叠问题

浏览器对 fieldset 的原生渲染会让 legend 半嵌入边框——这不是 bug，而是 HTML 规范定义的行为。但实际排版中常导致标题文字被边框裁切、对不齐、或响应式下错位。

关键原因在于：legend 默认是 fieldset 的第一个子元素，且其定位由 UA 样式强制设为「相对于 fieldset 边框偏移」，不是普通块级流布局。

常见错误写法：

用户信息

这段代码在 Chrome/Firefox 中，legend 文字左侧会“破框而出”，右侧可能被截断，尤其字体加粗或字号变大时更明显。

用 CSS 重置 legend 定位实现干净内嵌标题

不能靠 margin 或 padding 硬推——UA 样式里 legend 有隐藏的 display: table 行为，直接改 margin 会触发不可预测的重排。

可靠做法是显式覆盖其定位机制：

给 fieldset 设 position: relative
给 legend 设 position: absolute + top: -0.5em（微调值依字体大小而定）
必须加 width: max-content 防止撑满父容器
补 background: #fff 盖住下方边框，否则标题区域会透出边框线

示例最小可行样式：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

fieldset { position: relative; padding-top: 1.2em; }<br>legend {<br>  position: absolute;<br>  top: -0.5em;<br>  left: 1em;<br>  width: max-content;<br>  background: #fff;<br>  padding: 0 0.4em;<br>}