How To Make Ul List Items In A Single Line

I'm new to HTML, and I am trying to figure out how to align UL list items in a single line. I'm just starting to learn HTML. I have already checked more than 10 Stack Overflow ques

Solution 1:

This is the CSS you need to place them on the same line:

ul.mainLocli {
    display: inline-block;
    margin-left: 10px; // for item spacing
}

Solution 2:

Check now http://jsfiddle.net/bLc5eqgp/3/

.mainLocli {
    padding: 010px;
    display: inline;
}

added above css to your fiddle.

Solution 3:

Add display: inline to .mainLogo and display: inline-block to li

Here is the full CSS

body {
  padding-top: 105px;
  color: #CDCDCD;
  font-family:'BrandonGrotesqueBold';
}
.mainHeader {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 1060px;
font-size: 22px;
font-stretch: none;
}
.mainNav {
margin-bottom: 70px;
}
.mainLogo {
font-weight: 500;
color: black;
font-size: 40px;
display: inline;
}
.thinMainLogo {
font-family:'BrandonGrotesquelight';
}
li {
display: inline-block;
list-style-type: none;
}
.mainLoc {
float: right;
display: inline;
}

Check this JS Fiddle