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

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        5个月前关闭。



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

* {
  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部门的内部。

最佳答案

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