文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML Marquee-scroller未能显示元素

问HTML Marquee-scroller未能显示元素
EN

Stack Overflow用户

提问于 2018-04-20 09:58:19

回答 1查看 95关注 0票数 0

我的Marquee scroller有一个非常奇怪的问题。下面是我的HTML和CSS实现。

在我的滚轮中，我有5个元素。我想保持每个元素的宽度-容器作为变量取决于基础元素的长度。

奇怪的是，我的HTML页面没有显示任何元素。但是，如果我减少元素的数量(假设为3)，那么基础元素将按照设计的方式显示。

如果这里有人能给我看一下下面代码中的错误，我会很感激的。例如，如果元素的数量很高，为什么没有显示这些元素(在我的实际实现中，我实际上有100多个元素在滚动器中)。

提前谢谢你的帮助。

<!DOCTYPE html>
<html lang = "en">
<head><link rel = "stylesheet" type = "text/css" href = "CSS.css"></head>
<body>  
    <div id = "Scroller_ID" class = "Scroller">
        <div class = "Marquee">
            <div class = "Marquee-content">
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            fffff
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
            </div>
        </div></div></body>

CSS

* {
        margin: 0;
        border: 0;
        padding: 0;
    }
.Scroller {
        position: absolute;
        z-index: 400;
        height: 85px;
        margin: 5px auto;
        background: #ffffff;
        padding: 0;
        display: flex;      
        font-size: 16px;
        float: left;
        background-color: hsla(0,0%,90%,1);  
    }
.Marquee {
        margin: 9px 12px 9px 12px;
        background: rgba(256, 256, 256, 0.8);
        padding: 0;
        overflow: hidden;
    }
.Marquee-content {
        display: flex;      
        animation: marquee 7s linear infinite running;
        margin: 0;
        padding: 0;
    }
.Marquee-tag {      
        height: 67px;
    }
.Marquee-tag-Status {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 20px;
        display: inline-block;
        float: left;
        background: rgba(0,0,0,0);
        margin-top: 3px;
        font-size: 9px;
    }
.Marquee-tag-Content {
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        height: 100%;
        min-width: 420px;       
        background: rgba(0,0,0,.5);
        margin-top: 3px;
        font-size: 9px;
    }
@-moz-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@-webkit-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@-o-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }

html

css

marquee

scroller

回答 1

Stack Overflow用户

发布于 2018-04-20 10:49:29

使用marquee标记显示marquee元素，并在标记中给出方向，参见下面的示例

<marquee>This is basic example of marquee</marquee>
      <marquee direction = "up">The direction of text will be from bottom to top.</marquee>

票数 -3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49939010

复制

相似问题

问HTML Marquee-scroller未能显示元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Marquee-scroller未能显示元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Marquee-scroller未能显示元素
EN