mohsin mohsin - 3 months ago 9
CSS Question

Images align left not working with li tag in html and css

I am making an image slider with jquery and for that purpose I am trying to align images in one line with li tag using css but it's not happening the way I want.

I want to slide from left to right when the first image reach in the middle then the second image comes in, this Image shows exactly what I want.

enter image description here

<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="images/a.jpe"></img></li>
<li class="service-list"><img src="images/b.jpe"></img></li>
</ul>
</div>


css

#divFrame
{
width: 311px;
height: 333px;
background-color: gray;
position: relative;
margin-left: 20%;
overflow: hidden;
}


img{
float: left;
}

.liClass {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}


if I remove the overflow hidden property from divFrame and decrease the divFrame then it shows images like below, and why It's creating weird gap on left and top.

enter image description here

if I increase the divFrame size more then these two images then it shows like that

enter image description here

<html>

<head>
<script src="jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<html>

<body>

<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
</ul>
</div>

</body>

</html>

Answer
  • Correct your markup.
    • there's no such thing as an </img> tag. IMG tags are self-closing. The proper way to close an img tag is to use <img src="" />.
    • Your CSS targets a class titled .liClass, but that class is nowhere in your posted HTML.

With cleanup, and correction, removing the CSS for the images and actually targeting the li items via a class, display: inline-block; should correct this issue. Note that I also added white-space: nowrap; to the ul CSS.

jsFiddle example

(with corrections)