在我的导航 div 中嵌套一个无序列表 [关闭]答案

【问题标题】：Nesting an unordered list inside of my nav div [closed]在我的导航 div 中嵌套一个无序列表 [关闭]
【发布时间】：2019-12-30 01:02:19
【问题描述】：

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

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

【问题讨论】：

你没有用关闭你的 ul
谢谢你回答了我的问题。
不相关但重要，将<i />标签放在它自己的li标签内：stackoverflow.com/a/2161486/863110
不确定这是否得到解决，但在我看来，这是一个由浮动子元素引起的父元素折叠的经典案例。相关：stackoverflow.com/questions/2062258/…

标签： html css

【解决方案1】：

如您所见， ul 标签将覆盖整个部分。但是 li 只会带一个单独的标签：

所以，为了给 ul put 颜色背景颜色：#00ff00；在里面。它会像：

如果你想给每个 li 赋予背景颜色，只需将代码放在 li 标签的样式中。

希望它对您的项目有所帮助。祝你好运..

【讨论】：

【解决方案2】：

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

【讨论】：