How to display

elements in line

Question

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>

On a side note, try to avoid using the `style` attribute. Your `
Indeed, you don't even need those classes and IDs on the LIs at all, as you can target them via the class/ID on the UL itself. — ralph.m, May 23 '13 at 10:12

Bruno · Accepted Answer · 2018-04-14T05:17:04.643

4

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>

edited Apr 14 '18 at 05:17

answered May 23 '13 at 10:09

Bruno

5,961
6
33
52

also use *display:inline-block; for ie8 compatible. – Mud Hut May 24 '13 at 07:46

Mr. Alien · Answer 2 · 2013-05-23T10:16:00.107

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)

score 1 · Answer 3 · answered May 23 '13 at 10:11

1

Give a float left to the LI's:

#ddbar li{
           float:left;
          }

answered May 23 '13 at 10:11

Disgeae

80
2
8

score 1 · Answer 4 · edited May 23 '13 at 10:17

1

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

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

edited May 23 '13 at 10:17

Vivek Jain

3,811
6
30
47

answered May 23 '13 at 10:12

Javascript Coder

5,691
8
52
98

score 1 · Answer 5 · edited May 23 '17 at 12:11

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;" ...>

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.
0em is the same as 0. You don't need to specify the unit when dealing with values of 0.

Good answer, but it might be good to clarify "flexibility". There are both pluses and minuses to using `inline-block` over `inline`. — Alohci, May 23 '13 at 10:25

score 0 · Answer 6 · answered May 23 '13 at 10:16

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;
}

score 0 · Answer 7 · answered May 23 '13 at 10:18

0

Just by adding this will serve your purpose:-

 #ddbar li {
 float:left; 
 }

answered May 23 '13 at 10:18

Vivek Sadh

4,230
3
32
49

score 0 · Answer 8 · answered May 23 '13 at 17:24

0

Just use

#ddbar {
    display:inline-block;
   }

answered May 23 '13 at 17:24

Tempest

3
2

How to display elements in line

8 Answers8

How to display

elements in line