我正在Udemy上完成PSD to HTML5/CSS3课程,而且我的结果不会像截屏视频中显示的那样呈现。如果SO没有要求10的代表,我会发布比较屏幕截图,但基本上作者的版本水平呈现列表项目,没有项目符号,而我的使用项目符号垂直渲染。
<html>
<head>
<title>My Website</title>
<link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<div class="container clearfix">
<a href="/" title="Return to Home" id="logo">
<img src="images/logo.gif" alt="Logo">
</a>
<nav>
<ul>
<li><a href="">About</a>
</li>
<li><a href="">Services</a>
</li>
<li><a href="">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- end container -->
</header>
</body>
</html>
/* Navigation Styling */
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ui li {
list-style: none;
float: right;
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 20px;
border-left: solid 1px #333;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE6/7 (trigger hasLayout) */
}
我已尝试将display
中的header nav ul li a
切换为inline
,这似乎对水平列表更合乎逻辑,但这并没有改变任何内容。有什么想法吗?
答案 0 :(得分:0)
您的 css 中存在语法错误,只需将nav ui li
替换为nav ul li
。