Question

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

问题

在#right div中，fieldset width的{{1}}被设置为auto。这个fieldset有两个类.form-label和.form-input的html元素，它们的宽度相等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容器的宽度为1071像素。 fieldset div中的表单元素的容器#right是一个inline元素，因为我不希望它占据全屏，但是如果它有那么多内容的话。因此，fieldset可以占据max-width的{{1}}。现在，100%的总width在fieldset和.form-input（即.form-label）之间平均分配。两个所述元素都包含在div中，除了width:48%之外，它没有分配给它的任何css属性.form-input overflow:hidden;'. Hence considering the width of 1066px, each of应该能够占用and '.form-label的最大宽度。但这不会发生在我的身上。

如果您全屏查看给定的示例。即使511px div中可用的总空间为1066px，您也会发现。我的截止百分比... 标签仅占用#right，相应的输入占据272px左右。这两个元素出现在两条不同的行上，即使它们应该出现在同一行上。它们229px的总和远小于可用的总空间，即1066px。即使我添加width's+margins+paddings+borders=524px的填充，边距和边框，总宽度也会达到550px。

所以我的问题是，为什么fieldset不会根据其内部内容的宽度进行扩展，以及如何在不妨碍我的网站布局的情况下克服这一点。

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

min-width white-space:nowrap max-width`被删除，因为它没有任何用途，因为我在与@Ankush讨论问题时已经意识到

Answer 1

好的，所以我在全屏幕上运行你的代码片段并使用 width属性进行了一些操作，问题在于你的form-label和form-input的宽度值。 / p>

首先，您已指定最大宽度，最小宽度属性以及 两者的宽度属性。但是当您通过定义宽度：48％指定特定宽度值时，定义最小宽度和最大宽度没有意义，因为您已为容器定义了固定宽度，因此 min -width和max-width将无效。

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

所以在您的情况下发生的情况是，当标签标签中的宽度超过最初定义的宽度值时，则宽度总和表单输入和表单标签超过100％值。

现在 fieldset 尝试增加其宽度，但这种增加fieldset宽度的行为会导致增加form-label的整体宽度（对我们有利）并且还有表格输入的宽度（因为它减少了总的可用空间而不利于它）。

所以现在由于字段集宽度的增加而增加的表单标签宽度不足以容纳标签标签中文本的宽度，因为文本的宽度已经大于并且总是大于增加的宽度你因为增加了fieldset的宽度。

因此，如果您希望您的标签标签符合您定义的宽度，那么您只需将显示定义为内嵌块

但是，一旦超过定义的宽度，这将把标签文本分割成多条线，这在第一个位置是你不想要的，因为它会杀死自动增加fieldset宽度的目的。

所以我看到的最合适的解决方案是在rem中限制 form-input 的 max-width 并注释掉固定的 width 值表格输入，这将有助于你消除上面提到的 FACTOR ，这对我们不利。

Answer 2

将width的{{1}}和max-width更改为fieldset。像这样：

.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%;
    max-width: 48%;
    min-width: 11rem;
    margin-left:0.5rem !important;
    margin-bottom: 0.5rem !important;
    vertical-align: middle;
    display: inline-block;
    text-align: left;
}
.form-label{
    width:48%;
    max-width: 48%;
    min-width: 11rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: super;
}
.form-button{
    width:auto;
    margin-top: 1rem;
}

fieldset{
    width: 90%;
    max-width: 90%;
    display:inline;
    margin: 1rem auto 2rem auto;
    border-radius: 0.5rem;
    border: 3px double #000000;
}

div不按内部内容宽度扩展

2 个答案: