CODEWITHSUNDEEP
htmlcss
milano
milano

Reputation: 475

How to display <li> </li> elements in line

Hi i am adding this content to <li> tags and it is coming one below the other.But i want it to come in one line like this...

    Home  aboutus  contactus  ourservices

here is my html

<ul class="ddbar" id="ddbar">
<li class="topmenu" menu_id="0" style="padding: 0em 44.0714px;">
<a href="http://localhost" class="baritem">Home</a>
</li><li class="topmenu" menu_id="1" style="padding: 0em 15.0714px;">
<a href="#" class="baritem">Communities</a>
</li><li class="topmenu" menu_id="2" style="padding: 0em 8.57143px;">
<a href="#" class="baritem">Gallery</a>
</li><li class="topmenu" menu_id="3" style="padding: 0em 32.0714px;">
<a href="#" class="baritem">Bash</a>
</li><li class="topmenu" menu_id="4" style="padding: 0em 0.0714286px;">
<a href="#" class="baritem">Videos</a>
</li><li class="topmenu" menu_id="5" style="padding: 0em 18.0714px;">
<a href="#" class="baritem">Services</a>
</li><li class="topmenu" menu_id="6" style="padding: 0em 6.07143px;">
<a href="#" class="baritem">Create account</a>
</li>
</ul>

Upvotes: 1

Views: 1927

Answers (8)

Bruno
Bruno

Reputation: 6000

In order to have the list element on the same line you have to modify their display property. Also you may want to avoid the rendering of the bullet buttons; in this case you have to set the list-style of the root list element to none.

ul#ddbar {
  list-style: none;
}

ul#ddbar li {
  display: inline-block;
  
  padding: 4px 10px;
  background-color: #EEE;
  border-radius: 5px;
}
<ul id="ddbar">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Upvotes: 4

Tempest
Tempest

Reputation: 3

Just use 

#ddbar {
    display:inline-block;
   }

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

There are several ways you can do this:

Method 1: Floating the list items

li { float:left; }

Method 2 and 3: Displaying the list items in line with eachother

li { display:inline; }
/* OR, if you want more flexibility: */
li { display:inline-block; }

See this question's most voted answer for information about the differences.

Method 4: Displaying the list as a table

ul { display:table; }
li { display:table-cell; }

All 4 methods in one JSFiddle example.

As a side note, a couple of points about your current markup:

<li ... menu_id="1" style="padding: 0em 15.0714px;" ...>
  1. menu_id isn't a valid attribute. If you want to use a custom attribute like this, you should use data-* attributes - so data-menuid="0" would suffice.
  2. 0em is the same as 0. You don't need to specify the unit when dealing with values of 0.

Upvotes: 1

Vivek Sadh
Vivek Sadh

Reputation: 4268

Just by adding this will serve your purpose:-

 #ddbar li {
 float:left; 
 }

Upvotes: 0

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

ul#ddbar {
    list-style: none;
}
ul#ddbar li {
    display: inline-block;
    float: left;
}

Live demo can be seen at http://jsfiddle.net/6EZaQ/

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

I would normally use float: left on the LIs, and sometimes I use display: inline-block instead. But you can also use display: table (though by default this will spread the menu across the page):

#ddbar {
    list-style: none;
    display: table;
}

#ddbar li {
    display: table-cell;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

You need to use display: inline-block; if you want to line up the li elements, on the other hand you can also you float: left;

If you are interested to re factor your code a bit, you are calling class on each li and a where you can target these elements like

ul.ddbar li {
   /* Styles */
}

ul.ddbar li a {
   /* Styles */
}

In this way you don't have to call classes on each element as all the classes are same for each type of element

Note: As far as this attribute goes menu_id="2", it's an invalid markup, I assume that your code is dynamically generated and you don't have much hold on > it, if you do have, also consider removing the inline styles, also if you are using an id for ul element you really don't have to call a class, usingul#ddbar {} will give you same results

Demo (inline-block Example)

Demo (float example)

Upvotes: 2

Disgeae
Disgeae

Reputation: 80

Give a float left to the LI's:

#ddbar li{
           float:left;
          }

Upvotes: 1

Related Questions