Spacing between two <li> elements - html

Question

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:
How can I remove this spacing?

Answer 1

By put them inline
<ul>
<li>Text</li><li>text</li>
</ul>
Js Fiddle Demo

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Just Add float:left in your Css
ul li {
background-color: #A9A9A9;
display: inline;
float: left;
padding: 5px;
}
Demo

Answer 6

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.