FANDOM


  • I am trying to get a few images onto the same, horizontal line. I first used a div to do so, but can't seem to get it to work. How do I get multiple images onto the same line, without a gallery?</div>

      Loading editor
    • You can simply display the images on same line if you add them all on one line:

      [[File:Example.jpg|50px]] [[File:Example.jpg|50px]] [[File:Example.jpg|50px]] [[File:Example.jpg|50px]]
      Or this could work as well:
      [[File:Example.jpg|50px]]
      [[File:Example.jpg|50px]]
      [[File:Example.jpg|50px]]
      [[File:Example.jpg|50px]]
      Above results this:
      Example Example Example Example
      Is this what you are trying achieve?
        Loading editor
    • Though yes, that is what I'm trying to achieve, it doesn't work in the given context. Here is the code am using (apologies for it not displaying properly.

      <div style="background-color:#00264d; padding:.5em; border:1px solid #aaa;"> <center> ===Wiki Content=== </center> <div style= "width: 125px;"> [[File:Meteosgame.jpg|75px]][[File:Meteosgame.jpg|75px]][[File:Meteosgame.jpg|75px]] <center> [[Games]] </center> </div> </div>

        Loading editor
    • The width you are setting for div in which images are in is too short for them to be able to appear on same line. You would have to increase it:
      <div style="width: 230px;">[[File:Example.jpg|75px]][[File:Example.jpg|75px]][[File:Example.jpg|75px]]</div>
        Loading editor
    • You could do what Aiihuan said, if you don't want to put 230px, you could replace it with "100%," or the desired space you wish to have, so it would start:
       <div style="width: 100%;"> 
      However, this way it takes all the horizontal space in range. If you don't want that you could edit the width %.

      What I usually do is make a table, if not I use ul and li elements to make my pictures in line.Something like this:

       <ul><li style="inline-grid; float:left; list-style:none; padding: 3px;">picture.png</li> <li style="inline-grid; float:left; list-style:none; padding: 3px;">picture2.png </li> </ul> 

      I am not an expert on these things, it might not be the best way, but thats just how I do it. Someone might advise you better.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message