CODEWITHSUNDEEP
htmlcss
user3501316
user3501316

Reputation: 3

When I use <ul> <li> , how to let the element inside the li float left but the <li>

I struggled for this issue for hours, but can't get it work still.

I have the html code like this :

 <ul>
    <li><div>aa</div><div>aa11</div><li>
    <li><div>bb</div><div>bb11</div><li>
 </ul>

I wondered how to use css to let the <div> display in one line each li. But the <ul><li> label still have its vertical style.

I am new to CSS, and any help will be thankful.

Upvotes: 0

Views: 68

Answers (5)

napendra
napendra

Reputation: 378

I have Updated your code, Here is the JSFiddle link and let me know if you want more change:

http://jsfiddle.net/h5bMa

HTML:

<ul>
    <li><div>aa</div><div>aaa1</div></li>
    <li><div>bb</div><div>bbb1</div></li>
</ul>

CSS:

ul li{
float: left;
}

Upvotes: 0

Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

ul li{
display: table;
}

ul li div{
float: left;
}

This will make the <div> inside the <li> to look side by side.

Upvotes: 2

Clinton Dsouza
Clinton Dsouza

Reputation: 328

<li style="float:left"><div>aa</div><div>aa11</div></li>

and end your list items with </li> not with <li>

Upvotes: 0

Bill Mei
Bill Mei

Reputation: 787

It looks like you forgot to close your <li> tags, you have opening <li> tags but you didn't close them with </li>. If you want to make aa and aa11 side-by-side you also need to add a display: inline-block; style to your divs. Here's a demonstration: http://jsfiddle.net/5wLku/

Here's my solution:

<ul>
    <li><div>aa</div><div>aa11</div></li>
    <li><div>bb</div><div>bb11</div></li>
 </ul>

Upvotes: 0

natlotzy
natlotzy

Reputation: 97

You might also want to add 

list-style-type: none;

in order to get rid of the bullet-points. In addition to what @Viswalinga Surya S said

Doing that, would give you this --> http://jsfiddle.net/A35Fe/

Upvotes: 0

Related Questions