如何通过内联CSS恢复fieldset默认样式（Tabler CSS冲突）

Tabler CSS框架会覆盖<fieldset>和<legend>的默认浏览器样式，其中对<legend>的改动（设置display: block并添加底部外边距）导致它无法内嵌在fieldset边框中。你已经恢复了fieldset的边框，只需给<legend>添加内联CSS覆盖Tabler的样式，就能让文字回到内嵌状态：

具体解决方案： #

给<legend>添加以下内联样式，同时补充<fieldset>的padding以优化内部布局：

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">

<fieldset style="border: 1px solid; padding: 1em;">
  <legend style="display: inline; margin: 0; padding: 0 0.5em;">Demo</legend>
  Field 1: <input type="text"><br>
  Field 2: <input type="text">
</fieldset>

样式说明： #

• display: inline：将legend从块级元素改回默认的行内元素，使其能嵌入边框
• margin: 0：清除Tabler给legend添加的底部外边距
• padding: 0 0.5em：给legend文字添加左右内边距，避免文字直接贴在边框上
• padding: 1em（fieldset上）：让内部表单元素和边框保持合适间距

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