0

通过单击一个按钮，我将新元素添加到列表中。每个元素都有自己的消息，该消息绝对定位于该元素。在我将 'overflow:hidden' 属性添加到父列表元素之前，这可以正常工作。显然，消息被隐藏了。如果必须设置 overflow:hiddne 属性，如何为每个新元素显示消息？这是jsFiddle和代码：

HTML：

<span id='click-me'>Click me</span>
<ul id='list'></ul>

CSS：

#list {
    width:100px;
    height:100px;
    border: 1px solid blue;
    overflow:hidden;
}
.option {
    width:100px;
    height:20px;
    border: 1px solid green;
    position:relative;
}
.message {
    width: 79px;
    height: 20px;
    background: gray;
    position: absolute;
    right: -90px;
    top: 0;
}

JS：

$('#click-me').click(function() {
    $('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});

编辑：我尝试使用overflow-x 和overflow-y 属性。但不知何故，它并没有像我期望的那样做。将这些属性添加到 #list 元素：

#list {
    ...
    overflow-y:hidden;
    overflow-x:visible;
}

创建底部滚动条。这是预期的行为吗？

4

1 回答 1

1

更改height为。#list_min-height

检查更新的 Fiddle。

于 2013-08-21T18:36:32.610 回答