CSS3列表导航未向左浮动

Limbo Gene 发表于 Dev

凌波基因

当上传系列的人没有上传练习文件时，我正在做有关tuts + premium的教程。当我将他的教程视频中的所有内容完全复制到CSS文档中时，CSS列表项将不会向左浮动。我尝试了所有尝试，但未能成功。这是HTML：

<!doctype HTML>
<html>
<head>
<title>CSS3 Transitions</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/lesson02.css" />
</head>
<body>
<nav class="main-nav">
    <ul class="top-nav">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</nav>
</body>

以及从教程复制的CSS代码：

/********** TOP NAV *************/
nav.main-nav {
   background: #333;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f),   to(#4f4f4f));
   background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:         -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:            -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:             -o-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:             linear-gradient(top, #2f2f2f, #4f4f4f);
   width: 100%
}

.top-nav {
   border-bottom: 2px solid #111;
   height: 30px;
   list-style-type: none;
   margin: 0;
   padding-left: 0;
   width: 100px;
}

.top-nav li {
   background: #333;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
   background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:     -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:        -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:         -o-linear-gradient(top, #2f2f2f, #4f4f4f);
   background-image:         linear-gradient(top, #2f2f2f, #4f4f4f);
   border-bottom: 2px solid #111;
   border-right: 1px solid #555;
   float: left;
   font-size: 14px;
   height: 20px;
   padding-top: 10px;
   position: relative;
   text-align: center;
   width: 150px;
}

.top-nav li a {
   color: #aaa;
   padding-top: 5px;
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 25px;
   text-decoration: none;
}

您也可以在tuts +高级教程中找到另一个CSS文件：Normalize CSS v2.1.1

请有人帮忙

阿齐兹

菜单项的确是浮动的，但是它们的父容器被限制为一定的宽度，100px从而使它们彼此环绕。

只需width: 100px从.top-nav

/********** TOP NAV *************/

nav.main-nav {
  background: #333;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
  background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
  width: 100%
}

.top-nav {
  border-bottom: 2px solid #111;
  height: 30px;
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

.top-nav li {
  background: #333;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
  background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
  background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
  border-bottom: 2px solid #111;
  border-right: 1px solid #555;
  float: left;
  font-size: 14px;
  height: 20px;
  padding-top: 10px;
  position: relative;
  text-align: center;
  width: 150px;
}

.top-nav li a {
  color: #aaa;
  padding-top: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 25px;
  text-decoration: none;
}

<nav class="main-nav">
  <ul class="top-nav">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">products</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。