<ul> with overflow-y:auto和<li> s的相对位置表现奇怪

Question

我有以下标记

<div class="row-fluid">
    <div class="span4">
        <ul class="test">
            <li>Arun</li>
            <li>Krishna</li>
            <li>Soundar</li>
        </ul>
    </div>
</div>

和css

.test {
    height: 500px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px 4px 70px;
}

和脚本

$('.test li').draggable({
    revert: 'invalid'
})

如果你将项目拖到右侧,它就会消失,我不知道它为什么会这样.

如果overflow-y: auto;样式被删除.test它工作正常.

演示:小提琴
你可能不得不增加预览标签的宽度,因为响应式css在小提琴中复制问题

Answer 1

CSS 上的问题bootstrap-combined.min.css。它设置了一些宽度，因为它会导致问题。

所以删除bootstrap-combined.min.css并尝试。

请参阅现场演示

更新：

添加border: 1px solid;到您的.test课程中，然后您会看到实际的差异，如果您发表评论，它为什么会起作用overflow

如果您在 firebug 上进行调试，您将看到下面的 CSS 类（来自bootstrap-combined.min.css）导致了您的问题

.row-fluid .span4 {
    width: 31.4917%;
}