水平导航保持垂直显示

时间:2014-11-15 18:49:18

标签: html css html5 css3

我正在Udemy上完成PSD to HTML5/CSS3课程,而且我的结果不会像截屏视频中显示的那样呈现。如果SO没有要求10的代表,我会发布比较屏幕截图,但基本上作者的版本水平呈现列表项目,没有项目符号,而我的使用项目符号垂直渲染。

HTML:

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

CSS:

/* 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,这似乎对水平列表更合乎逻辑,但这并没有改变任何内容。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您的 css 中存在语法错误,只需将nav ui li替换为nav ul li