我正在尝试使用<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>
这就是我所看到的,没有国界。
对评论意见的更新:
*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”。每当我得到一条边界,它总是像这样的“外部”边界:
发布于 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
复制相似问题