CODEWITHSUNDEEP
htmlcss
user2953119
user2953119

Reputation:

Spacing between two <li> elements

I've written the folloning code:

<ul>
    <li>Text</li>
    <li>text</li>
</ul>

and styles:

list-style-type: none;
padding: 5px;
display: inline;
background-color: #A9A9A9;

But i have spacing between two li elements like the following:

enter image description here

How can I remove this spacing?

Upvotes: 0

Views: 7001

Answers (6)

Kheema Pandey
Kheema Pandey

Reputation: 10265

There are many ways as mentioned above few of them..however you can achieve with another method. using font-size:0

ul
{font-size:0; /*This will remove the space totally*/
list-style-type: none;
} 

li{
padding: 5px;
display: inline;
background-color: #A9A9A9;
font-size:16px; /*This is important line so the font come again in same shape*/
}

Here is the Demo.

Upvotes: 0

Ravi Patel
Ravi Patel

Reputation: 5211

Just Add float:left in your Css

ul li {
   background-color: #A9A9A9;
   display: inline;
   float: left;
   padding: 5px;
}

Demo

Upvotes: 0

dima
dima

Reputation: 1189

try floats and use list-style-type for ul:

ul {
  list-style-type: none;
}
li {
  padding: 5px;
  float:left;
  background-color: #A9A9A9;
}

Upvotes: 0

Mr. iC
Mr. iC

Reputation: 129

Here are two common ways to avoid the space:

<ul>
  <li>
  one</li><li> <!-- use this to avoid the linebreak -->
  two</li><li>
  three</li>
</ul>

Or you can use Comments:

<ul>
  <li>one</li><!--
  --><li>two</li><!-- Comments so there is no white-space
  --><li>three</li>
</ul>

You can check it in this Demo

You get the space because there is some space between the elements. (Tabs, Newline count as space ). With this Minimized HTML it should work :)

You can read more about it here Examples at CSS-Tricks

Upvotes: 1

classicjonesynz
classicjonesynz

Reputation: 4042

If you float your li items, it should remove the margin between li output.

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>


ul {
    list-style-type: none;
}

ul li {
    float:left;
    padding: 5px;
    display: block;
    background-color: #A9A9A9;
}

Upvotes: 3

Sachin
Sachin

Reputation: 40970

By put them inline

<ul>
    <li>Text</li><li>text</li>
</ul>

Js Fiddle Demo

Upvotes: 3

Related Questions