CODEWITHSUNDEEP
htmlcsslist
Ricky
Ricky

Reputation: 87

Style a list in css to display inline

i have a unordered list that displays a link and an image, and i want to display them inline. i have used the following:

<ul>
   <li><a href="www."><img src="www."/>Link one</a>
<li><a href="www."><img src="www."/>Link two</a>
<li><a href="www."><img src="www."/>Link three</a>
</ul>

in the css i have put:

li {
display: inline;
margin: 0 10px;
}

but the list is still showing one item per line

Upvotes: 0

Views: 66

Answers (4)

Mad Angle
Mad Angle

Reputation: 2330

Close the li tags

<style>
    li {
        margin: 0 auto;
        position: relative;
        float: left;
        display: inline;
    }
    </style>
    <ul>
       <li><a href="www."><img src="www."/>Link one</a></li>
        <li><a href="www."><img src="www."/>Link two</a></li>
        <li><a href="www."><img src="www."/>Link three</a></li>
    </ul>

Upvotes: 1

Suraj Rawat
Suraj Rawat

Reputation: 3763

Close your li's and use , its working as expected 

<ul>
<li><a href="www."><img src="www."/>Link one</a></li>
<li><a href="www."><img src="www."/>Link two</a></li>
<li><a href="www."><img src="www."/>Link three</a></li>
</ul>

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

Try this

li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}

Upvotes: 0

Ricky
Ricky

Reputation: 87

i found the answer was to change it to display: inline-block;

hope this helps others.

Upvotes: 0

Related Questions