marquee在内容太长时推送内容

Question

我的导航栏上有一个“新闻”的东西，它使用选框来移动文本但是当文本太长时，它会推送我的内容（不是导航栏的内容，而是网站上的主要内容） 。它也无法从导航栏的开头开始，而是选择从中间开始，但实际上取决于文本的持续时间......

navigationbar.php

<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI']);

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>
<!--START NAVIGATION-->
<div class="nav-align">

    <div class="social-wrapper">
        Social Media :
        <a href="" class="nav-social-icons"><i class="fa fa-facebook-official"></i></a><!--facebook-->
        <a href="" class="nav-social-icons"><i class="fa fa-twitter-square"></i></a><!--twitter-->
        <a href="" class="nav-social-icons"><i class="fa fa-youtube-play"></i></a><!--youtube-->
        <a href="" class="nav-social-icons"><i class="fa fa-google-plus-square"></i></a><!--google+-->
        <a href="" class="nav-social-icons"><i class="fa fa-instagram"></i></a><!--instagram-->
        <a href="" class="nav-social-icons"><i class="fa fa-steam-square"></i></a><!--steam-->
    </div>

    <nav class="nav-main">
        <a href="/">
            <img class="logo" src=""></img>
        </a>

    <?php
        if(empty($_SESSION['user'])){
            echo'<div class="user-container">';
                echo'You are signed in as guest, please';
                echo'<a href="/signin" class="button login">Sign In</a>';
                echo'or';
                echo'<a href="/signup" class="button2 register">Sign Up</a>';
            echo'</div>';
        }else {
            echo'<div class="user-container">';

            echo"<span><i class='fa fa-wrench'></i></span> <a class='a' href='/settings'> Settings";
            echo"</a>";
            echo" &nbsp;|&nbsp; ";

            echo'<a class="a" href="/user/';
            echo htmlentities($_SESSION['user']['id'], ENT_QUOTES, 'UTF-8');
            echo '">';
            echo htmlentities($_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); 
            echo'</a> &nbsp;<span><i class="fa fa-user"></i></span>
            <a href="/signout" class="button">Sign Out &nbsp;<i class="fa fa-sign-out"></i></a>';
            echo'</div>';
        }
    ?>
    </nav>

    <div class="nav-item-container">
        <ul>
            <li>
                <a href="/" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("")?>>Home &nbsp;</div></a>
            </li>
            <li>
                <a href="/about" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("about")?>>About &nbsp;</div></a> 
            </li>
            <li>
                <a href="/contact" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("contact")?>>Contact &nbsp;</div></a>
            </li>
            <li>
                <a href="/forum" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("forum")?>>Forum &nbsp;</div></a>
            </li>
            <li>
                <a href="/upload" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("upload")?>>Upload &nbsp;</div></a>
            </li>
            <li>
                <a href="/server" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("server")?>>Server &nbsp;</div></a>
            </li>
            <li>
                <a href="/clan" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("clan")?>>Clan &nbsp;</div></a>
            </li>
            <li>
                <a href="/misc" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("misc")?>>Misc &nbsp;</div></a>
            </li>
            <div class="news-wrapper">
                <div class="news-content">
                    <i class="fa fa-bullhorn"></i> NEWS :
                </div>
            </div>
        </ul>
        <ul>
            <li style="overflow:hidden;">
                <div class="marquee-wrapper">
                    <marquee behavior="scroll" direction="left" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">
                        <?php
                            $items = Array(
                                "<span><i class='fa fa-bullhorn'></i> NEWS:</span>  Welcome to the website!",
                                "Welcome <span> <a class='a2' href='/user/'>".htmlentities($row['username'], ENT_QUOTES, 'UTF-8')."</a></span> to the website!",
                                "We currently got <span> ".htmlentities($row['id'], ENT_QUOTES, 'UTF-8')." </span> Unique members :)",
                                //"You can easly visit other members profiles by typing '/user/[id]' just replace [id] by any number.",
                            );
                            echo $items[array_rand($items)];
                        ?>
                    </marquee>
                </div>
            </li>
        </ul>
    </div>
</div>

NAV-bar.css

@charset "utf-8";
.nav-align {
    width:85.1%;
    padding-top:40px;
    margin:auto;
}


.nav-main{ 
margin:auto;
background-image: url("/images/background/navigationbar.jpg") !important;
border: 1px solid #000;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
height:80px;
color:#858d9a;
z-index:50;
}

.nav-main .logo{
float:left;
color:#fff;
text-decoration: none;
width:20%;
padding:5px 20px;
font-size:1.4em;
line-height:30px;
}

.user-container {
    float:right !important;
    height:30px;
    padding: 20px 20px;
    font-size:15px;
}

.nav-item-container {
    border-left:1px solid black;
    border-right:1px solid black;
    background-color: #1d1d1d;
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: linear-gradient(to top, #1a1b1f, #212528);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    height:30px;
}

.nav-item-container > ul{
    float:left;
    list-style-type:none;
    overflow:hidden;
}

.nav-item-container > ul > li{
    float:left;
}

.nav-item{
    font-size:12px;
    display:inline-block;
    padding:5px 10px;
    height:20px;
    line-height:20px;
    color:#7D91A3;
    text-decoration:none;
}

.selected {
    color:#05c7f7 !important;
}

.nav-item:hover {
    color:#fff;
    text-shadow: 0 1px 2px #000;
    -webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
    -moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
    box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;      
    background-image: linear-gradient(to top, #096aa1, #26c3f6);
}


.nav-content{
position:absolute;
top:184px;
overflow:hidden; 
background-color:#0d0f11;
max-height:0;
}

.nav-content a{
color:#fff;
text-decoration:none;
}

.nav-sub{
padding:10px;
}

.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}

.nav-sub ul li a{
display:inline-block;
padding:3px 0;
padding-left:10px;
color:#7D91A3;
}

.nav-sub ul li a:hover{
    color:#05c7f7;
}

.nav-item:focus ~ .nav-content{
    max-height:100px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #1d1d1d;
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: linear-gradient(to top, #1a1b1f, #212528);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    z-index:4000;
}

.social-wrapper {
    border-top:1px solid black;
    border-left:1px solid black;
    border-right:1px solid black;
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: linear-gradient(to top, #1a1b1f, #212528);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
    width:20%;
    min-width:230px;
    padding-left:10px;
    padding-right:10px;
    line-height:30px;
    height:30px;
    margin:auto;
}

.social-wrapper:hover {
    color:#05c7f7;
}

.nav-social-icons {
    padding-top:6px !important;
    line-height:21.5px;
    font-size:17px;
    padding:3px;
    color:#777f8c;
    float:right;
}

.nav-social-icons:hover {
    color:#fff;
    -webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
    -moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
    box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;      
    background-image: linear-gradient(to top, #096aa1, #26c3f6);
}

.news-content {
    background-color:#05c7f7;
    color:#05c7f7;
    padding:3px;
    width:100%;
    float:right;
    font-weight:bold;
    line-height:25px;
    background-color: #1d1d1d;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2);
    border: 1px solid #000;
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
    background-image: linear-gradient(to top, #1a1b1f, #212528);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.news-content:before {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.marquee-wrapper {
    line-height:30px !important;
    float:right;
}

.news-wrapper {
    padding-left:120px !important;
    float:right;
    line-height:25px;
}

• 所有内容上方的包装

  .content-wrapper {background-image：url（“/ images / background / content.jpg”）！important;宽度：85％; border：1px solid＃000; background-image：-webkit-linear-gradient（bottom，＃1a1b1f，＃212528）; background-image：-moz-linear-gradient（bottom，＃1a1b1f，＃212528）; background-image：-o-linear-gradient（bottom，＃1a1b1f，＃212528）; background-image：线性渐变（顶部，＃1a1b1f，＃212528）;余量：汽车;}

Answer 1

不要使用<marquee>元素，不推荐使用。

“此功能已过时。虽然它可能仍然适用于某些浏览器，但不鼓励使用它，因为它可以随时删除。尽量避免使用它。“

https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

但要解决您的问题，您可以尝试将overflow: hidden添加到.marquee-wrapper或.marquee-wrapper marquee