如何在一行中制作 UL 列表项
Posted
技术标签:
【中文标题】如何在一行中制作 UL 列表项【英文标题】：How to make UL list items in a single line 【发布时间】：2015-07-08 16:28:00 【问题描述】：我是 html 新手，我正在尝试弄清楚如何将 UL 列表项对齐在一行中。
我刚刚开始学习 HTML。我已经检查了 10 多个 Stack Overflow 问题，但没有一个有效。代码如下：
display :inline;
float: right;
margin: 0px;
padding: 0px;
这是我的html标记，你能帮我检查一下是否有错误吗？
@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/
【问题讨论】：
您是否尝试使用 display :inline-block insted 或仅 inline？ 我做了，但没用，我终于用 display:flex 解决了这个问题，谢谢 仅针对语法错误：1. 缺少<head> 标签。 2.file:///C:/Users/只在本地有效。 3. 拼写错误s color: black;。 4.最好设置charsetlearn more。
【参考方案1】：
这是您需要将它们放在同一行的 CSS：
ul.mainLoc li
display: inline-block;
margin-left: 10px; // for item spacing
【讨论】：
但这不起作用但是我发现了问题，我只是使用了 display : flex;【参考方案2】：立即查看http://jsfiddle.net/bLc5eqgp/3/
.mainLoc li
padding: 0 10px;
display: inline;
在你的小提琴中添加了上面的 css。
【讨论】：
【参考方案3】：将display: inline 添加到.mainLogo 和display: inline-block 到li
这是完整的 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;
查看@987654321@
【讨论】：
以上是关于如何在一行中制作 UL 列表项的主要内容，如果未能解决你的问题，请参考以下文章