Why can't you write this inline css in style?

there is a code for a round broadcast

body part of html

<body>
    <div id = "container">
        <div id = "list" style="left:-600px;">
            <img src="image/i1.png" alt="" />
            <img src="image/i2.png" alt="" />
            <img src="image/i3.png" alt="" />
            <img src="image/i4.png" alt="" />
            <img src="image/i5.png" alt="" />
            <img src="image/i1.png" alt="" />
            <img src="image/i2.png" alt="" />  
        </div>
        <div id = "buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <p id="prev" class="arrow" ><

<p id="next" class="arrow" >>

</div> </body>

I found it impossible to take away the style in this < div id = "list" style= "left:-600px;" > and write it into the css section. I don"t know why.

all html that can work properly.

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0; padding: 0; text-decoration: none; 
             }
            body{
                padding:20px;
            }
            -sharpcontainer{
                width:600px; height:392px; border:3px solid -sharp333; overflow: hidden; position:relative;margin:0 auto; 
            }
            -sharplist{
                width: 4200px; height: 400px; position: absolute; z-index: 1;
            }
            -sharplist img{
                float:left;width:600px;height:392px;
            }
            -sharpbuttons{
                position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
            }
            -sharpbuttons span{
                cursor: pointer; float: left; border:1px solid -sharpfff; width: 10px; height: 10px; border-radius: 50%; background: -sharp333; margin-right: 5px;
            }
            -sharpbuttons .on{
                background: orange;
            }
            .arrow{
                cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; 
            }
            .arrow:hover{
                background-color: RGBA(0,0,0,.7);
            }
            -sharpcontainer:hover .arrow{
                display:block;
            }
            -sharpprev{
                left:20px;
            }
            -sharpnext{
                right: 20px;
            }
        
        </style>
        <script type="text/javascript">
        
            window.onload = function (){
                var container = document.getElementById("container");
                var list = document.getElementById("list");
                var buttons = document.getElementById("buttons").getElementsByTagName("span");
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");
                var index = 1;
                var changed = false;
                var timer;

                function showButton(){
                    for(var i = 0;i < buttons.length; iPP){
                        if (buttons[i].className == "on"){
                            buttons[i].className = "";
                            break;
                        }
                    }
                    buttons[index - 1].className = "on";
                }

                function change(offset){
                    changed = true;
                    var newleft = parseInt(list.style.left) + offset;

                    var time = 300;
                    var interval = 10;
                    var speed = offset/(time/interval);

                    function go(){
                        if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
                             list.style.left = parseInt(list.style.left) + speed + "px";
                               setTimeout(go,interval);
                        }
                    else{
                    changed = false;
                    list.style.left = newleft + "px";

                    if(newleft > -600){
                        list.style.left = -3000 + "px";
                    }
                    if(newleft < -3000){
                        list.style.left = -600 + "px";
                        }
                      }
                    }
                    go();
                }

                function play(){
                    timer = setInterval(function(){
                        next.onclick();
                    },3000);
                }

                function stop(){
                    clearInterval(timer);
                }

                next.onclick = function() {
                    if(index == 5){
                        index = 1;
                    }
                    else{
                        index += 1;
                    }
                    showButton();
                    if(!changed){
                        change(-600);
                    }
                }

                prev.onclick = function() {
                    if(index == 1){
                        index = 5;
                    }
                    else{
                        index -= 1;
                    }
                    showButton();
                    if(!changed){
                        change(600);
                    }
                }

                
                for(var i =0; i <buttons.length; iPP){
                    buttons[i].onclick = function(){
                        
                        if(this.classname == "on"){
                            return;
                        }
                        
                       var myindex = parseInt(this.getAttribute("index"));
                       var offset = -600 * (myindex - index);

                       index = myindex;
                       showButton();
                       if(!changed){
                        change(offset);
                       } 
                    }
                }
                container.onmouseover = stop;
                container.onmouseout = play;

                play();
            }

        
        </script>

    </head>
    <body>
        <div id = "container">
            <div id = "list" style="left:-600px;">
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />
                <img src="image/i3.png" alt="" />
                <img src="image/i4.png" alt="" />
                <img src="image/i5.png" alt="" />
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />  
            </div>
            <div id = "buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <p id="prev" class="arrow" ><

<p id="next" class="arrow" >>

</div> </body> </html>

all html that cannot be run

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0; padding: 0; text-decoration: none; 
             }
            body{
                padding:20px;
            }
            -sharpcontainer{
                width:600px; height:392px; border:3px solid -sharp333; overflow: hidden; position:relative;margin:0 auto; 
            }
            -sharplist{
                width: 4200px; height: 400px; position: absolute; z-index: 1; left:-600px;
            }
            -sharplist img{
                float:left;width:600px;height:392px;
            }
            -sharpbuttons{
                position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
            }
            -sharpbuttons span{
                cursor: pointer; float: left; border:1px solid -sharpfff; width: 10px; height: 10px; border-radius: 50%; background: -sharp333; margin-right: 5px;
            }
            -sharpbuttons .on{
                background: orange;
            }
            .arrow{
                cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; 
            }
            .arrow:hover{
                background-color: RGBA(0,0,0,.7);
            }
            -sharpcontainer:hover .arrow{
                display:block;
            }
            -sharpprev{
                left:20px;
            }
            -sharpnext{
                right: 20px;
            }
        
        </style>
        <script type="text/javascript">
        
            window.onload = function (){
                var container = document.getElementById("container");
                var list = document.getElementById("list");
                var buttons = document.getElementById("buttons").getElementsByTagName("span");
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");
                var index = 1;
                var changed = false;
                var timer;

                function showButton(){
                    for(var i = 0;i < buttons.length; iPP){
                        if (buttons[i].className == "on"){
                            buttons[i].className = "";
                            break;
                        }
                    }
                    buttons[index - 1].className = "on";
                }

                function change(offset){
                    changed = true;
                    var newleft = parseInt(list.style.left) + offset;

                    var time = 300;
                    var interval = 10;
                    var speed = offset/(time/interval);

                    function go(){
                        if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
                             list.style.left = parseInt(list.style.left) + speed + "px";
                               setTimeout(go,interval);
                        }
                    else{
                    changed = false;
                    list.style.left = newleft + "px";

                    if(newleft > -600){
                        list.style.left = -3000 + "px";
                    }
                    if(newleft < -3000){
                        list.style.left = -600 + "px";
                        }
                      }
                    }
                    go();
                }

                function play(){
                    timer = setInterval(function(){
                        next.onclick();
                    },3000);
                }

                function stop(){
                    clearInterval(timer);
                }

                next.onclick = function() {
                    if(index == 5){
                        index = 1;
                    }
                    else{
                        index += 1;
                    }
                    showButton();
                    if(!changed){
                        change(-600);
                    }
                }

                prev.onclick = function() {
                    if(index == 1){
                        index = 5;
                    }
                    else{
                        index -= 1;
                    }
                    showButton();
                    if(!changed){
                        change(600);
                    }
                }

                
                for(var i =0; i <buttons.length; iPP){
                    buttons[i].onclick = function(){
                        
                        if(this.classname == "on"){
                            return;
                        }
                        
                       var myindex = parseInt(this.getAttribute("index"));
                       var offset = -600 * (myindex - index);

                       index = myindex;
                       showButton();
                       if(!changed){
                        change(offset);
                       } 
                    }
                }
                container.onmouseover = stop;
                container.onmouseout = play;

                play();
            }

        
        </script>

    </head>
    <body>
        <div id = "container">
            <div id = "list">
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />
                <img src="image/i3.png" alt="" />
                <img src="image/i4.png" alt="" />
                <img src="image/i5.png" alt="" />
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />  
            </div>
            <div id = "buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <p id="prev" class="arrow" ><

<p id="next" class="arrow" >>

</div> </body> </html>

there is only one difference between the two pieces of code.

html files that can run normally
style section

           -sharplist{
                width: 4200px; height: 400px; position: absolute; z-index: 1;  }

body part

            <div id = "list" style="left:-600px;">

cannot run html file properly

style part

           -sharplist{
                width: 4200px; height: 400px; position: absolute; z-index: 1;  left:-600px;}

body part

            <div id = "list">

other parts are exactly the same. Excuse me, why?

Mar.16,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b329f9-2be36.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b329f9-2be36.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?