html - div 未根据内部内容宽度扩展

Question

我的 html 页面有一个容器、一个左 div 和一个右 div。左右div都封装在容器内，宽度分别为20%和80%。

问题

在#right div 中，我有一个fieldset，它的width 设置为auto。这个 fieldset 有两个 html 元素 .form-label 和 .form-input 都有相同的宽度 48%。问题是，如果我的标签之一有大文本(不大于右侧 div 中的可用空间，并且根据所有规则)，那么字段集只会扩展到特定宽度，然后我的标签和输入元素就会停留在同一行被移动到两个不同的行。即使 div 仍有扩展空间，也会发生这种情况。

注意:我想指出的是，尽管该问题同时适用于 firefox 和 chrome，但该问题在 chrome 中更为明显，即使是中等长度的文本，如示例中所示。

代码如下:[请查看全屏输出以了解问题]

.container
{
    box-sizing: border-box;
    max-width: 100%;
    position:relative;
    float:bottom;
    height: 100%;
    margin: 6rem 0 1.5rem 0;
    overflow-x: auto;
    clear: both;
    display: -webkit-flex;		
    display: -ms-flexbox;		
    display: flex;
    flex-wrap:nowrap;
    flex-basis:0;
    align-items:stretch;
    justify-content: center;
   
}

#left{
    margin: 0;
    width:20%;
    padding: 4px 4px 4px 4px;
    color: #000011;
    font-weight:bold; 
    text-align: center;
    order:0;
    flex-order: 0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    align-self:stretch;
}

#right{
    margin-top: 0;
    width: 80%;
    padding: 4px 4px 4px 6px;
    text-align: center;
    flex-order: 1;
    order:1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    align-self:stretch;
    overflow: auto;
}
.form{
    text-align:right !important;
    
}

.form-input{
    width:48%;
    margin-left:0.5rem !important;
    margin-bottom: 0.5rem !important;
    vertical-align: middle;
    display: inline-block;
    text-align: left;
}
.form-label{
    width:48%;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: super ;
}
.form-button{
    width:auto;
    margin-top: 1rem;
}

fieldset{
    width: auto;
    max-width: 100%;
    display:inline;
    margin: 1rem auto 2rem auto;
    border-radius: 0.5rem;
    border: 3px double #000000;
}

<div class="container">
  <div id="left">
     blah blah balah blah blah.......
   </div>

  <div id="right">
    <fieldset class="form">
            <legend class="fit-title-blackgrad">Defaulter List Selection</legend>
            <div>
                <label class="form-label">Select Semester</label>
                <select class="form-input selecttodiv" name="dsem" id="dsem" tabindex="1" required=""><option value="">------</option><option value="I">I</option><option value="II">II</option><option value="III">III</option><option value="IV">IV</option><option value="V">V</option><option value="VI">VI</option><option value="VII">VII</option><option value="VIII">VIII</option>                </select>
            </div>
            <div>
                <label class="form-label">From (Month)</label>
                <select class="form-input" name="dfmonth" id="dfmonth" tabindex="2" required=""><option value="">------</option><option value="7">July</option>            </select>
            </div>
            <div>
                <label class="form-label">Cut-Off Percentage........................</label>
                <input class="form-input" type="number" min="50" max="75" name="dcutoff" id="dcutoff" tabindex="4" value="75" required="">
                
            </div>
            <div>
                <input type="submit" class="button form-button" value="Load">
            </div>
                    
           </fieldset>
  
    </div>
  </div>

我已经浏览了各种帖子，但是我无法找到解决方案。

我希望有人在这里帮助我。

在此先感谢您的帮助。

更新

让我详细解释一下到底发生了什么。

#right 容器的宽度在全屏时为 1071px。 fieldset 是 #right 中表单元素的容器 div 是一个 inline 元素，因为我不希望它占据全屏但是，如果它有那么多内容。因此 fieldset 可以占用 100% 的 max-width。现在 fieldset 的总 width 在 .form-input 和 .form-label 之间平均分配(即 宽度:48%)。上述两个元素都包含在 div 中，除 overflow:hidden;' 外，该 div 没有分配任何 css 属性。因此，考虑到 1066px 的宽度，.form-input 和 '.form-label 中的每一个都应该能够占据 511px 的最大宽度。但这不会发生在 mycase 中。

如果您在全屏中看到给定的示例。你会发现即使在#right div 中可用的总空间为1066px。我的 cut-off percentage... 标签仅占用 272px，相应的输入占用大约 229px。这两个元素出现在两条不同的行上，即使它们应该出现在同一行上。它们的 width's+margins+paddings+borders=524px 的总和远小于可用的总空间，即 1066px。即使我添加了 fieldset 的 padding、margin 和 border，总宽度还是 550px。

所以我的问题是，为什么字段集不会根据其内部内容的宽度扩展，我该怎么做才能在不影响我的网站布局的情况下克服这个问题。

注意:我不希望标签分成单独的行，因此在这种情况下单独使用 display:inline-block; 不是一个选项。我也曾尝试设置 white-space:nowrap 但是，这会导致我的字符串被截断，即它一直向右流动，直到它被右边的输入元素隐藏为止。

min-width 和 max-width` 已被删除，因为它没有任何作用，正如我在与@Ankush 讨论问题时所意识到的那样

Answer 1

好的，所以我全屏运行了您的代码片段，并使用了 width 属性，问题出在表单标签和表单输入的宽度值上。

首先，您指定了 ma​​x-width、min-width 属性以及 width 两者的属性。但是，当您通过定义 width:48% 指定特定宽度值时，定义 min-width 和 max-width 没有任何意义，因为您已经为容器定义了固定宽度，所以 min -width 和 max-width 将无效。

但主要问题是定义label 标记的宽度。 Label 标签是一个内联元素。因此，您无法真正定义它的宽度。

所以你的情况是，当标签标签中文本的宽度最初超过定义的宽度值时，宽度的总和 的表单输入和表单标签超过 100% 值。

所以现在 fieldset 试图增加它的宽度，但是这种增加 fieldset 宽度的行为会导致增加表单标签的整体宽度(对我们有利)以及表单输入的宽度(这对我们不利，因为它减少了总可用空间)。

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

因此，如果您希望 label 标记遵循您定义的宽度，那么您只需将 display 定义为 inline-block

但是这会在标签文本超过定义的宽度时将其拆分为多行，您一开始就不想这样做，因为它会破坏自动增加字段集宽度的目的。

所以我看到的最合适的解决方案是在 rem 中限制 form-input 的 ma​​x-width 并注释掉固定的 width 值表单输入，因为这将帮助您消除我在上面提到的对我们不利的因素。