<fieldset>没有边框
我正在尝试使用<fieldset>对某些控件进行分组。不管我做什么，我都不能把边界线展示出来。我的理解是，它应该默认显示。在<style>中，我尝试设置什么都不做的border-width:1px，border:solid在所有东西(包括<legend> )之外画一个边框。我在Firefox和Chrome中都进行了测试，没有区别。我遗漏了什么？下面是我的代码示例。我在玩不同的布局，所以忽略不一致的地方。
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Project Basics</legend>
<ul>
<li>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</li>
<li>
<label for="txtDescription">Description</label>
<textarea rows=3 cols=20 id="txtDescription"></textarea>
</li>
</ul>
</fieldset>
</div>
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Cost Estimations</legend>
<label for="txtEstTotalHrs">Estimated Total Hours</label>
<input type="text" id="txtEstTotalHrs" />
<label for="txtEstLaborCost">Estimated Labor Costs</label>
<input type="text" id="txtEstLaborCosts" />
</fieldset>
</div>
这就是我所看到的，没有国界。
对评论意见的更新：
- 蘑菇人，是的，我用的是鞋带。您是说将整个引导css添加到代码片段中吗？我是这个项目的设计者。
- 迈克·K.，我同意，我没有看到普通片段里的东西，所以有些东西被改写了。我不太清楚，但我确实查看了应用了什么样式，以及在fieldset级别，如果我将边框设置更改为1px，它会在字段集周围画一个外部框。我从开发工具中添加了一个图像。
*JonoJames，我尝试在标签中添加样式，比如这个<fieldset style="border-color:black !important; border-style:solid !important">，但我仍然什么也没看到。当我查看dev工具时，它会显示那些在元素级别设置的属性，但是前端没有任何变化。
这应该是一个简单的问题。
测试更新：我在_Layout.cshtml文件中找到了对引导css的引用，所以我开始逐个注释它们。违法者似乎是<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> --除了字段集:禁用之外，对字段集的唯一引用在这一行中。
fieldset{min-width:0;padding:10rem;margin:10rem;border:10rem}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}我尝试过将所有属性设置为零以外的其他属性，但没有效果。设置如“10 or”或“25 like”。每当我得到一条边界，它总是像这样的“外部”边界：
回答 3
Stack Overflow用户
发布于 2022-04-21 18:41:40
终于弄明白了。根据本文的讨论，Fieldset传奇不起作用 5中的字段集边框将关闭所有内容。
我最后的CSS如下所示：
fieldset {
margin-bottom: 1em !important;
border: 1px solid #666 !important;
padding:1px !important;
}
legend {
padding: 1px 10px !important;
float:none;
width:auto;
}谢谢你的意见。读几遍你的回复有助于我解决疑难问题。
Stack Overflow用户
发布于 2022-04-19 22:35:03
您可以使用CSS添加自定义边框。
.fieldsetColored{
border-color: #F00;
border-style: solid;
}<fieldset class="fieldsetColored">
<legend>box</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<label for="txtEstTotalHrs">Estimated Total Hours</label></br>
<input type="text" id="txtEstTotalHrs" /></br>
<label for="txtEstLaborCost">Estimated Labor Costs</label></br>
<input type="text" id="txtEstLaborCosts" /></br>
</tr>
</table>
</fieldset>
您可能在某个地方有一个冲突的样式表，如果它的引导程序使用！重要的CSS覆盖样式属性，就会关闭边框。
！重要
查看类列表<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
这看起来像引导
Stack Overflow用户
发布于 2022-10-09 16:20:08
这应该管用！
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3">
Your Title
</legend>
<p>Your content</p>
</fieldset>https://stackoverflow.com/questions/71931967
复制相似问题
腾讯云开发者
