问题

我有一个<select>在那里它的一个<option>的文本值是很长.我想要<select>调整大小,因此它永远不会比它的父级宽,即使它必须切断其显示的文本.max-width: 100%应该这样做.

在调整大小之前:

但是,使用a <div>而不是a<fieldset>的等效页面可以正确缩放.如果您在一个页面上拥有a 和a ,并且彼此相邻,则可以更轻松地查看并更改测试更改.如果删除周围的标签,则调整大小有效.该标签在某种程度上导致水平尺寸调整打破.<fieldset><div><fieldset><fieldset>

这些<fieldset>行为就好像有一条CSS规则fieldset { min-width: min-content; }.(min-content粗略地表示不会导致孩子溢出的最小宽度.)如果我<fieldset>用a <div>替换min-width: min-content,它看起来完全一样.然而min-content,我的样式,浏览器默认样式表中没有规则,或者在Firebug的CSS Inspector中可见.我试图覆盖<fieldset>Firebug的CSS Inspector和Firefox的默认样式表forms.css中可见的每个样式,但这没有帮助.特别重写min-width,width也没有做任何事情.

码

字段集的HTML:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section"> …

为什么我们需要<fieldset>标签？它服务的目的可能是表单标签的一个子集.

我在W3Schools上查了一些信息,其中说:

• 该<fieldset>标记用于在窗体组相关的元素.
• 该<fieldset>标签绘制围绕相关元素的盒子.

更多解释那些误解"为什么它存在于规范中"为"它做什么"的人.我认为绘图部分是无关紧要的,我不明白为什么我们需要一个特殊的标签来分组表格中的一些相关元素.

看来fieldset默认为其容器的100%宽度.有没有什么方法可以让字段设置与字段集中最宽的控件一样大？

我个人喜欢这个<fieldset>标签,因为它如何绘制一个盒子并将<legend>它放在边框上方.像这样.

但是,该fieldset元素用于组织表单,并且将其用于一般设计并不比使用表格进行一般设计更好.所以,我的问题是...... 如何使用另一个标签获得相同的结果？边框必须在<legend>(或任何其他标签将被使用)下删除,并且因为可能存在"复杂的"身体背景图像,所以我不能仅设置background-color图例以匹配元素之一下.

我希望它能在没有JavaScript的情况下工作,但CSS3和基于XML的格式(如SVG或XHTML)都可以.

我想用标题创建一个这样的框:

任何人都可以告诉我,如果有一个默认的CSS标签来做到这一点？或者我需要创建自定义样式？

我知道您可以在django中为Admin帮助程序指定字段集.但是,我找不到任何对ModelForms有用的东西.只是一些我无法使用的补丁.我错过了什么吗？有没有一种方法可以实现像fieldset这样的东西,而无需在相应的标签中手动写出模板上的每个字段.

理想情况下,我想迭代一组BoundFields.但是,在我的ModelForm结束时做这样的事情:

    fieldsets = []
    fieldsets.append(('Personal Information',
                      [username,password,password2,first_name,last_name,email]),) # add a 2 element tuple of string and list of fields
    fieldsets.append(('Terms & Conditions',
                      [acceptterms,acceptprivacy]),) # add a 2 element tuple of string and list of fields

失败,因为我的数据结构中包含的项目是原始字段,而不是BoundFields.看起来像动态生成的BoundFields ......这让我感到难过.我可以创建自己的forms.Form子类,其中包含一个fieldsets的概念(即使是一个不向后兼容的粗略的...这只适用于我自己的项目)如果是这样,你能给出任何指针吗？我不想乱用django代码.

我想知道我是否可以使用fieldset标签而不是在里面form.因为我喜欢它包围legend内部html周围的边界内容的方式.当我用它来封闭li元素时,它的行为就像它在表单中的实际存在(可视)一样.

使用<fieldset>标签有什么好处？

我真的不知道它用于什么.

根据网络上的几个参考文献,无法定位图例.所以建议用span包装它:

<legend><span>Foo</span></legend>

然后我们可以将span放在fieldset中.但是当我想在字段集顶部添加边框时,传说中有一个间隙.幸运的是,我发现在图例中添加边框也可以修复这个微小的差距,但这是一个丑陋的解决方案(就像其他所有css一样).你有没有更有效的解决方案来解决这个问题？

注意:在我开始写这个问题后,我同时找到了解决方案,所以我还是想问一下.

我试图应用我display: inline;的<legend>元素中的<fieldset>元素,以便以下<span>将在同一行,但我的CSS没有任何效果.

legend{
    display: inline;
}
span {
    display: inline;
}

<fieldset>
    <legend>Legend</legend>
    <span>Follower</span>
</fieldset>

的jsfiddle

编辑

我无法控制HTML; 我只能编辑CSS