如何在单行中列出UL列表项 [英] How to make UL list items in a single line
本文介绍了如何在单行中列出UL列表项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是HTML的新手，我试图弄清楚如何在单行中对齐UL列表项.
I'm new to HTML, and I am trying to figure out how to align UL list items in a single line.
我才刚刚开始学习HTML.我已经检查了10个以上的Stack Overflow问题，但是没有一个工作.这是代码:
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;
这是我的html标记，您能帮我检查是否有任何错误吗?
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/
推荐答案
这是您需要将它们放在同一行上的CSS:
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
}
这篇关于如何在单行中列出UL列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
