时间戳

首页 > 解决方案 > 在我的导航 div 中嵌套一个无序列表

html - 在我的导航 div 中嵌套一个无序列表

问题描述

为什么我的无序列表会显示在我想要设置样式的除法元素下方？

* {
  padding: 0;
  margin: 0
}

#nav {
  width: 100%;
  background-color: #00ff00;
}

#cog {
  padding-left: 100px;
}

li {
  color: black;
  float: left;
  padding-left: 100px;
  list-style-type: none;
}

ul {
  color: black;
  float: right;
}

a {
  color: black;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Karuki Wireframe Project (p2)</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="regular.css">
  <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
  <div id="nav">
    <nav>
      <ul>
        <i class="fa fa-cog" aria-hidden="true" id="cog"></i>
        <li><a href="#">Username</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Deadline</a></li>
    </nav>
  </div>
</body>

<script>
  var windowSize = 0;
  window.onresize = function() {
    windowSize = window.innerWidth
    console.log(windowSize);

    if (windowSize < 600) {
      alert("you are mobile");
    }
  }
</script>

</html>

我没有看到无序列表后面的绿色背景色。为什么是这样？

我找到的唯一解决方案是在#nav 分区上设置一个高度，但是当我这样做时，看起来这两个元素根本没有相互连接。就好像 ul 甚至没有写入 #nav 部门的内部。

标签： htmlcss

解决方案

给予background-color呢<ul>？像这样：

* {
  padding: 0;
  margin: 0
}

#nav {
  width: 100%;
}

#cog {
  padding-left: 100px;
}

li {
  color: black;
  float: left;
  padding-left: 100px;
  list-style-type: none;
}

ul {
  color: black;
  float: right;
  background-color: #00ff00;
}

a {
  color: black;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Karuki Wireframe Project (p2)</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="regular.css">
  <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
  <div id="nav">
    <nav>
      <ul>
        <i class="fa fa-cog" aria-hidden="true" id="cog"></i>
        <li><a href="#">Username</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Deadline</a></li>
    </nav>
  </div>
</body>

<script>
  var windowSize = 0;
  window.onresize = function() {
    windowSize = window.innerWidth
    console.log(windowSize);

    if (windowSize < 600) {
      alert("you are mobile");
    }
  }
</script>

</html>

推荐阅读