Question

I have the following html code

<ul style="text-align:left;width: 100px;height: 300px; overflow-y:scroll; list-style: none;list-style-position:inside;">
// li will be dynamically insert by JQuery
    <li> <img src="xxxx">1</img></li>
    <li> <img src="xxxx">2</img></li>
    ...
</ul>

I was expecting the output to be

IMG1
IMG2

however, the actual output is:

{Some Space}IMG1
{Some Space}IMG2

anyone know what should I do, to have the image have zero space to the left?

Thanks

Answer 1

The space is caused by padding on the ul. You’ll need to add padding-left: 0 to your styles