How to make UL list items in a single line
Question
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>
3 answers
solution1
4 2015-07-08 16:29:47
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
}
solution2
1 2015-07-08 16:33:24
Check now http://jsfiddle.net/bLc5eqgp/3/
.mainLoc li {
padding: 0 10px;
display: inline;
}
added above css to your fiddle.
solution3
0 2015-07-09 19:17:50
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.