Why aren't my buttons separating to different lines?-CodePudding

I have a html file which contains the following:

<!DOCTYPE html>
<html>
    <title>Song Player 1.0</title>
    <h1>Song Player</h1>
    <script>
        function play() {
          var audio = document.getElementById("audio");
          audio.play();
        }
        function stop() {
          var audio = document.getElementById("audio");
         audio.pause();
        }
        function res() {
          var audio = document.getElementById("audio");
         audio.currentTime = 0
        }
        function play2() {
          var audio2 = document.getElementById("audio2");
          audio2.play();
        }
        function stop2() {
          var audio2 = document.getElementById("audio2");
         audio2.pause();
        }
        function res2() {
          var audio2 = document.getElementById("audio2");
         audio2.currentTime = 0
        }
        function play3() {
          var audio3 = document.getElementById("audio3");
          audio3.play();
        }
        function stop3() {
          var audio3 = document.getElementById("audio3");
         audio3.pause();
        }
        function res3() {
          var audio3 = document.getElementById("audio3");
         audio3.currentTime = 0
        }
        function play4() {
          var audio4 = document.getElementById("audio4");
          audio4.play();
        }
        function stop4() {
          var audio4 = document.getElementById("audio4");
         audio4.pause();
        }
        function res4() {
          var audio4 = document.getElementById("audio4");
         audio4.currentTime = 0
        }
      </script>
     <ol style="list-style: none;">
      <input type="button" value="Play" onclick="play()">  <input type="button" value="Stop" onclick="stop2()">        <input type="button" value="Play" onclick="play()">  <input type="button" value="Stop" onclick="stop()">  <input type="button" value="Restart" onclick="res()"> 

      <input type="button" value="Play" onclick="play2()">  <input type="button" value="Stop" onclick="stop2()">        <input type="button" value="Play" onclick="play()">  <input type="button" value="Stop" onclick="stop2()">  <input type="button" value="Restart" onclick="res2()"> 

      <input type="button" value="Play" onclick="play3()">  <input type="button" value="Stop" onclick="stop2()">        <input type="button" value="Play" onclick="play()">  <input type="button" value="Stop" onclick="stop3()">  <input type="button" value="Restart" onclick="res3()">

      <input type="button" value="Play" onclick="play4()">  <input type="button" value="Stop" onclick="stop2()">        <input type="button" value="Play" onclick="play()">  <input type="button" value="Stop" onclick="stop4()">  <input type="button" value="Restart" onclick="res4()">
     </ol>
      <audio id="audio" src="videoplayback.mp3"></audio>
      <audio id="audio2" src="vid2.mp3"></audio>
      <audio id="audio3" src="vid3.mp3"></audio>
      <audio id="audio4" src="vid4.mp3"></audio>
    </body>
</html>

However, when i run this in my browser, the buttons aren't on separate lines? I was hoping for it to be like the following:

Song Player
play stop restart
play stop restart
ect

Obviously without the bullet points. The sound files are in a folder along with the .html file. Any help would be great! Thanks in advance!

CodePudding user response：

You need a line break (<br />) tag (if you remove the ordered list) after a line of button tags. HTML doesn't recognize line breaks in the code unless it's in a <pre> tag. Otherwise use <li> as a child of the <ol> if you want an ordered list.

CodePudding user response：

I replaced the ol with a div:




<style>
       .audio-btns {
         display: grid;
         grid-template-columns: repeat(3, 100px);
         row-gap: 20px;
        column-gap: 20px;
       }
     </style>
     <div >
      <input type="button" value="Play" onclick="play()">  
       <input type="button" value="Stop" onclick="stop2()"> 
       <input type="button" value="Restart" onclick="res()"> 
       
       <input type="button" value="Play" onclick="play()">  
       <input type="button" value="Stop" onclick="stop()">  
       <input type="button" value="Restart" onclick="res()"> 

      <input type="button" value="Play" onclick="play2()">  
       <input type="button" value="Stop" onclick="stop2()">  
       <input type="button" value="Restart" onclick="res()"> 
       
       <input type="button" value="Play" onclick="play()"> 
       <input type="button" value="Stop" onclick="stop2()">
       <input type="button" value="Restart" onclick="res2()"> 

      <input type="button" value="Play" onclick="play3()">
       <input type="button" value="Stop" onclick="stop2()">
       <input type="button" value="Restart" onclick="res()"> 
       <input type="button" value="Play" onclick="play()">
       <input type="button" value="Stop" onclick="stop3()">
       <input type="button" value="Restart" onclick="res3()">

      <input type="button" value="Play" onclick="play4()">  
       <input type="button" value="Stop" onclick="stop2()">
       <input type="button" value="Restart" onclick="res()"> 
       <input type="button" value="Play" onclick="play()">  
       <input type="button" value="Stop" onclick="stop4()">  
       <input type="button" value="Restart" onclick="res4()">
     </div>