Html 在IE中避免在具有动态宽度的div中使用换行符

我正在尝试创建一个div，该div的动态宽度取决于该div中的内容。它在Firefox中运行良好，但在IE中，我得到了换行符，请参见下面的屏幕截图：

标记如下所示：

<div class="filter-dropdown">
    <div class="filter-dropdown-options-wrapper">
        <ul>
            <li>
                <label>
                    <input type="checkbox" checked="checked">(Select All)
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="2010-01-31" checked="checked">2010-01-31
                </label>
            </li>
        </ul>
    </div>
    <div class="filter-btn-wrapper">
        <input type="button" value="Ok" class="btn-filter-ok">
        <input type="button" value="Cancel" class="btn-filter-cancel">
    </div>
</div>

 .filter-wrapper div.filter-dropdown{
 position:absolute;
 top:-190px;
 right:10px;
 border:1px solid #CFD6DA;
 z-index:10000;
 display:none;
 padding:10px;
 height:170px;
 background-color:#EEF1F2;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper{
 border:1px solid #CFD6DA;
 padding:5px 10px;
 height:130px;
 overflow-y:auto;
 background-color:#FFFFFF;
 width:100%;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul{
 list-style:none;
 padding-left:0px;
 margin:0px;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul li label{
 display:block;
}

.filter-wrapper div.filter-dropdown .filter-btn-wrapper{
 margin-top:10px;
 text-align:right;
 width:130px;
}

.filter-wrapper div.filter-dropdown .filter-btn-wrapper .btn-filter-ok{
 margin-right:5px;
 width:60px;
}

---

所以，我的问题是-为了避免换行并保持外部div的宽度动态，我必须做些什么？

首先，将输入右侧的填充/边距设置为足够小，使该框不想换行。它正在包装，因为空间不够了。如果设置标签的背景色，您可能会看到标签的结束位置

最后，作为故障保护，您可以设置

空白：nowrap

但这应该是一个针对时髦字体大小问题的故障保护，而不是您的主要解决方案，因为它会引入复杂的水平滚动条等

---

编辑：此外，您需要从

标签中取出

标签。标签应该按名称附在输入上，而不是因为标签在输入中

首先，将输入右侧的填充/边距设置为足够小，使其不需要包装。它正在包装，因为空间不够了。如果设置标签的背景色，您可能会看到标签的结束位置

最后，作为故障保护，您可以设置

空白：nowrap

但这应该是一个针对时髦字体大小问题的故障保护，而不是您的主要解决方案，因为它会引入复杂的水平滚动条等

---

编辑：此外，您需要从

标签中取出

标签。标签应该按名称附在输入上，而不是因为标签在输入中

如果用户增加字体大小，你会怎么做？我做了一个快速测试，当增加/减少字体大小时，这个标记的缩放效果非常好。如果用户增加字体大小，你会怎么做？我做了一个快速测试，当增加/减少字体大小时，这个标记的缩放效果非常好。well，“空白：nowrap；“确实解决了这个问题！但是如果我将复选框移到标签外，那么输入后我会得到linebrake。这是因为你在问题中发布的CSS的第四条规则中，在标签上设置了

display:block；

，这是对你自己不利的。LI元素已经是块级别的，这条规则是多余的，而且是无用的。”根据你的布局，嗯，“空白：nowrap；“确实解决了这个问题！但是如果我将复选框移到标签外，那么输入后我会得到linebrake。这是因为你在问题中发布的CSS的第四条规则中，在标签上设置了

display:block；

，这是对你自己不利的。LI元素已经是块级别的，这条规则是多余的，而且是无用的。”根据您的布局进行调整。