html - 避免在 IE 中使用动态宽度的 div 内换行

Question

我正在尝试创建一个具有动态宽度的 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>

CSS 看起来像这样:

 .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 的宽度动态？

Answer 1

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

最后，作为故障保险，您可以设置 white-space: nowrap;但这对于时髦的字体大小问题应该是一个故障保护，而不是您的主要解决方案，因为它会引入水平滚动条等的复杂性。

编辑:此外，您需要获取 <input...> <label...> 中的标签标签。标签应该按名称附加到输入，而不是因为在其中!