Question

Demo jsFiddle

我的问题是：

如果我影响绝对定位max-height容器的.rc-datalist，则会出现一个滚动条：这是预期的行为。

但此容器中最长的子项出错：最后一个字符隐藏在滚动条下。（我在jsFiddle中突出显示了这一行）

当我添加一个正确的浮动元素时，它会变得更糟，正如你所看到的......

请问，有人知道如何修复/破解这种奇怪但跨浏览器的行为吗？我只希望滚动条出现时.rc-datalist稍大一些。

信息：

没有javascript，只有CSS（我确定知道如何使用javascript修复它）
.rc-datalist absolute position是强制性的，我不想为其指定数字宽度。
.rc-option元素的内容可以更改或包装。我只需要保持.rc-datalist和.rc-option之间的亲子关系。在.rc-option内，我不在乎，只要它能完成这项任务！

Answer 1

从white-space:nowrap移除.rc-option，离开：

.rc-option {
    padding:0 0.5em;
}

Demo Fiddle

Answer 2

我终于通过我自己找到了解决方案。

Fixed Demo jsFiddle

添加：

.rc-option:before {
    float :right;
    width:1.5em;
    content:'';
    display:inline-block
}

默认情况下会放大每一行（即使没有滚动条），但会保持突出显示效果。

是!!我知道这是可能的。

Answer 3

如果您有滚动问题，请尝试overflow-x : scroll和overflow-y : scroll 如果您想让隐藏文字位于其背景之上，请尝试更高z-index;，例如z-index:100

如果您孩子的背景宽度为自动，请尝试填充为padding: 1px

您可以在以下网站上学习：

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/cssref/pr_padding.asp

具有滚动条的绝对定位容器中的宽度问题

Demo jsFiddle

3 个答案:

Demo Fiddle

Fixed Demo jsFiddle