Question

我正在尝试一个一个接一个显示几个文本列表项的垂直滚动条，但我需要一些帮助来定位它们。

您会看到一个包含两个项目的网络自动收报机。要一次只显示一个项目，我必须在#tickerContainer中设置'overflow：hidden'。

然而，自动收报机中的文字并未位于自动收报机的中心（如您所见，它位于底部）。

另外，当我从#tickerContainer中移除'overflow：hidden'时，这是整个滚动条从页面顶部移开？

请帮我解决这个问题。 http://jsfiddle.net/nodovitt/NYhY4/2/

<div id="tickerContainer">
    <ul id="ticker" class="js-hidden">
        <li class="news-item">Item Number 1</li>
        <li class="news-item">Item Number 2</li>
    </ul>
</div>

jQuery函数：

<script>
function tick() {
    $('#ticker li:first').slideUp(1000, function () {
        $(this).appendTo($('#ticker')).slideDown(1000);
    });
}
setInterval(function () {
    tick()
}, 2000);
</script>

CSS：

#tickerContainer {
    background-color:white;
    border-radius:15px;
    text-align:center;
    margin:10px;
    box-shadow:0 0 8px black;
    color:#2B7CD8;
    font-size:50px;
    width:500px;
    height:100px;
    overflow:hidden;

}
.news-item {
    font-family:Times New Roman;
    font-style:oblique;
}
#ticker li {
    list-style-type:none;
}

Answer 1

您尚未在自动收报机ID上添加任何规格。像这样http://jsfiddle.net/NYhY4/10/

#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}

Answer 2

以下是我根据OP

的要求给出的答案

将此css添加到您的#ticker

#ticker {
    margin: 0;
    padding: 0;
    line-height: 100px;
}

注意行高必须始终为#tickerContainer的高度

您可以在此处查看http://jsfiddle.net/NYhY4/3/

Answer 3

#ticker li {
    list-style-type:none;
    position: relative;
    bottom:20px;
}

Answer 4

我不喜欢当前项目被看似“没有”（文本上方的li框的空白部分）隐藏，所以我使用了这种方法：

从'#ticker'
设置'#ticker'填充顶部（.5em最适合我）
设置'#ticker li'padding-bottom将下一个项目推出视图（我使用'1em'是安全的，但'。5em'也可以工作）

单词看起来并不完全集中，所以

将'#ticker li'line-height设置为'1em'

#ticker { margin: 0; padding-top: .5em; }

#ticker li{ line-height: 1em; padding-bottom: 1em; list-style-type: none; }

http://jsfiddle.net/JvuKU/2/

注意这取决于'#tickerContainer'的字体大小。如果您更改'#tickerContainer'的高度或字体大小，只需调整'#ticker'padding-top和'#ticker li'padding-bottom的值。

使用overflow：hidden </div>在<div>的中心仅显示一个列表项

4 个答案: