#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    94
    Rep Power
    10

    Inline image within a li tag


    I am trying to make my images appear inline with each other, so they can alongside each other

    Code:
    .line li{list-style-image:none; 	
             display:inline;
             float:left; 	
             margin:0px; 	
             padding:0px; 
    }
    Code:
    <ul class="line">
    <li><a href="#"><img src="images/lo/flame.jpg" title="best guest" width="196" /></a>
    </li>  
    <li><a href="#"><img src="images/lo/flame.jpg" title="best guest" width="196" /></a>
    </li>  
    <li><a href="#"><img src="images/lo/flame.jpg" title="best guest" width="196" /></a>
    </li>  
    <li><a href="#"><img src="images/lo/flame.jpg" title="best guest" width="196" /></a>
    </li>  
    <li><a href="#"><img src="images/lo/flame.jpg" title="best guest" width="196" /></a>
    </li>  
    </ul>
    All I get is a stack of pictures on a new line, since I want a jquery scrollbar when I've finished sorting out this, it has to overflow the width of the div, sorry about no preview, because I only am working on localhost
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    39
    Rep Power
    2
    li elements are block by default, for that reason they'll just stack on top of each other instead of sitting inline. you're gonna want to make them inline-block
  4. #3
  5. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    It may be because you are writing

    display: inline;

    instead, try display:inline-block;

    that will do the trick
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    94
    Rep Power
    10
    Nah, found out what the problem was, you've got to style the div that that contained the images, not the li itself

IMN logo majestic logo threadwatch logo seochat tools logo