2

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

您将看到一个包含两个项目的网络代码。要一次只显示一项，我必须在#tickerContainer 中设置“溢出：隐藏”。

但是，代码中的文本并未位于代码的中心（如您所见，它位于底部）。

另外，当我从#tickerContainer 中删除“溢出：隐藏”时，整个代码会从页面顶部移开吗？

请帮我解决这个问题。 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;
}
4

4 回答 4

2

你没有在你的股票代码上设置任何规格。所以像这样http://jsfiddle.net/NYhY4/10/

#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}
于 2013-07-26T18:23:09.950 回答
1

这是我应OP要求的答案

将此CSS添加到您的#ticker

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

注意line-height 总是必须是#tickerContainer

你可以在这里看到它http://jsfiddle.net/NYhY4/3/

于 2013-07-26T18:25:01.020 回答
0 
#ticker li {
    list-style-type:none;
    position: relative;
    bottom:20px;
}
于 2013-07-26T18:23:23.290 回答
0

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

  1. 从“#ticker”中删除边距
  2. set '#ticker' padding-top (.5em 最适合我)
  3. 设置 '#ticker li' padding-bottom 将下一个项目推到视野之外（我使用 '1em' 是安全的，但 '.5em' 也有效）

这些词看起来并不完全居中，所以

  1. 将“#ticker li”行高设置为“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 的值。

于 2013-07-26T19:36:42.567 回答