Html 无法真正定义其宽度

Html 无法真正定义其宽度,html,css,google-chrome,firefox,Html,Css,Google Chrome,Firefox,因此,在您的情况下,当标签标签中文本的宽度最初超过定义的宽度值时,则表单输入和表单标签的宽度之和超过100%的值 因此,字段集现在试图增加其宽度,但增加字段集宽度的行为会导致增加表单标签的总宽度(这对我们有利),也会增加表单输入的宽度(这不利于减少总可用空间) 因此,现在由于字段集宽度增加而增加的表单标签宽度不足以容纳标签标记中的文本宽度,因为文本宽度已经大于并且将始终大于由于字段集宽度增加而增加的宽度 因此,如果您希望标签标签跟随您定义的宽度,那么您可以简单地将显示定义为内联块 但是,一旦标签

因此,在您的情况下,当标签标签中文本的宽度最初超过定义的宽度值时,则表单输入和表单标签的宽度之和超过100%的值

因此,字段集现在试图增加其宽度,但增加字段集宽度的行为会导致增加表单标签的总宽度(这对我们有利),也会增加表单输入的宽度(这不利于减少总可用空间)

因此,现在由于字段集宽度增加而增加的表单标签宽度不足以容纳标签标记中的文本宽度,因为文本宽度已经大于并且将始终大于由于字段集宽度增加而增加的宽度

因此,如果您希望标签标签跟随您定义的宽度,那么您可以简单地将显示定义为内联块

但是,一旦标签文本超过定义的宽度,就会将其拆分为多行,这是您首先不希望看到的,因为这会破坏自动增加字段集宽度的目的


因此,我看到的最合适的解决方案是在rem中限制表单输入的最大宽度,并注释掉表单输入的固定宽度值,因为这将帮助您消除上面提到的对我们不利的因素。

您的输出没有显示标签即使有空位,我也不想打断你的话。我有一个相当大的样式表,因此我忘了包括按钮的对齐方式。但是,这与OP无关。因此只需将
字段集的
宽度和
最大宽度更改为
%
。答案已更新。如果我按照你说的做,问题会出现,但会影响我的布局,因为输入元素的大小会因此而不同。这就是保持宽度为48%的原因,以便所有输入元素对齐到同一行,同时所有标签对齐到同一行。那么,您能否改进解决方案来缓解这一问题concern@geeksal,您所说的“输入元素因此而大小不同”到底是什么意思?您的意思是说,选择框中可能的选项大小变化很大,如果将宽度从48%减小,则选项的最大长度将不适合一行吗?这就是你的意思吗?因为如果你知道选择框中任何选项文本将占据的最大宽度是多少,那么你可以做的是保持输入元素和标签对齐,注释掉宽度:表单输入的48%,并将表单输入的最小宽度增加到18rem,即。,最小宽度的固定值,根据所有选项的文本最大长度的宽度,但以px或rem为单位,而不是以%为单位。试试看。希望它能修复您的对齐。好的,我删除了
minwidth
。我希望输入元素和标签的宽度相等。我不能保持像素宽度,因为它妨碍了我网站的响应性设计。我的实际问题是,尽管有足够的可用空间,为什么feildset没有扩展,以及它的解决方案是什么。首先,我要求您注释宽度,而不是最小宽度,并给出一个固定的最小宽度。如果不能以像素为单位保持最小宽度,则使用rem,但不能以%为单位。只有表单标签+表单输入的宽度小于96%(即48+48),字段集才会展开。所以,当定义两者的48%固定宽度时,随着字段集大小的增加,两者的等效48%值都会增加。因此,表单输入的大小也会增加,因此表单输入宽度和表单标签宽度之和总是超过可用空间。