displaying labels horizontally instead of vertically in thymeleaf [duplicate] - spring

Question

So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?

Answer 1

Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>

Answer 2

This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/

Answer 3

I guess the simple solution i found is below
ul{
display:flex;
}

Answer 4

A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/

Answer 5

You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes

Answer 6

Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

Answer 7

strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>