Question

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

在我的滚动条中，我有5个元素。 我希望将每个元素容器的宽度保持为变量，具体取决于底层元素的长度。

奇怪的是，我的HTML页面无法显示任何元素。但是，如果我减少元素的数量（比如说3），那么底层元素就会按照设计显示出来。

我很感激，如果有人在这里可以告诉我任何指针在下面的代码中出了什么问题，即如果元素数量很高，为什么元素不会显示（在我的实际实现中，我实际上有超过100个滚动条中的元素）。

提前感谢您的帮助。

HTML

<!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%);
            }
    }

Answer 1

使用marquee标签显示选框元素也在标签中给出方向，参见下面的例子

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

HTML Marquee-scroller无法显示元素

1 个答案: