首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 ><fieldset>没有边框

<fieldset>没有边框
EN

Stack Overflow用户
提问于 2022-04-19 22:20:06
回答 3查看 339关注 0票数 0

我正在尝试使用<fieldset>对某些控件进行分组。不管我做什么,我都不能把边界线展示出来。我的理解是,它应该默认显示。在<style>中,我尝试设置什么都不做的border-width:1pxborder:solid在所有东西(包括<legend> )之外画一个边框。我在Firefox和Chrome中都进行了测试,没有区别。我遗漏了什么?下面是我的代码示例。我在玩不同的布局,所以忽略不一致的地方。

代码语言:javascript
运行
复制
<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" /> --除了字段集:禁用之外,对字段集的唯一引用在这一行中。

代码语言:javascript
运行
复制
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”。每当我得到一条边界,它总是像这样的“外部”边界:

EN

Stack Overflow用户

发布于 2022-10-09 16:20:08

这应该管用!

代码语言:javascript
运行
复制
<fieldset class="border rounded-3 p-3">
   <legend class="float-none w-auto px-3">
      Your Title
   </legend>
   <p>Your content</p>
</fieldset>
票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71931967

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档