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 questions but none of them are working. Here is the code:

display :inline;
float: right;
margin: 0px;
padding: 0px;

And here is my html markup, can you help me to check if there are any errors?

@font-face {
    font-family:'BrandonGrotesqueBold';
    src: url('file:///C:/Users/MyName/Desktop/project/fonts/BrandonGrotesqueBold.ttf');
}
@font-face {
    font-family:'BrandonGrotesqueLight';
    src: url('file:///C:/Users/MyName/Desktop/project/fonts/BrandonGrotesqueLight.ttf');
}
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;
    s color: black;
    font-size: 40px;
}
.thinMainLogo {
    font-family:'BrandonGrotesquelight';
}
li {
    list-style-type: none;
}
.mainLoc {
    float: right;
    display: inline;
}

<!DOCTYPE html>
<title>My Company Name</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header class="mainHeader">
        <nav class="mainNav">
             <h1 class="mainLogo">My <span class="thinMainLogo">Logo</span></h1>

            <ul class="mainLoc">
                <li>About</li>
                <li>PortFolio</li>
                <li>Contact</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
</body>

</html>

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

回答1:

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

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

回答2:

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

.mainLoc li {
    padding: 0 10px;
    display: inline;
}

added above css to your fiddle.

回答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

来源：https://stackoverflow.com/questions/31298447/how-to-make-ul-list-items-in-a-single-line

标签

html

css

menubar