html 如何创建分组框

wfsdck30  于 2023-01-28  发布在  其他
关注(0)|答案(2)|浏览(157)

我发现这个代码创建组框:

<fieldset>
    <legend>Title</legend>
</fieldset>

据说它在运行时创建了以下分组框:

当我在我的Visual Studio代码中运行时,它显示如下:

边框几乎看不见,文本出现在错误的地方,我做错了什么吗?

u1ehiz5o

u1ehiz5o1#

问题是所有的浏览器都有不同的默认样式,你的不一样。
我从MacOS + Chrome109复制了一些用户代理样式表

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}

legend {
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}
<fieldset>
  <legend>Title</legend>
</fieldset>
r8xiu3jd

r8xiu3jd2#

尝试将CSS添加到元素:

border: 5px solid black;

示例:

<fieldset style="border: 5px solid black;">
    <legend>Title</legend>
</fieldset>

相关问题