如何有一个 <div> 元素将 <ul> 内的 <li> 元素分组答案

【问题标题】：How to have a <div> element that groups <li> elements inside of <ul>如何有一个 <div> 元素将 <ul> 内的 <li> 元素分组
【发布时间】：2018-11-14 14:30:29
【问题描述】：

好的，所以对于我的网站，我们有一个使用列表的导航栏。我们有一部分元素向左浮动，一部分元素向右浮动。我的代码运行良好，只是 W3 验证器不断告诉我不能在 ul 元素中包含 div 元素。如果我为每个单独的 li 元素分配了使它们向左浮动的类，它们就不会留在同一行。这是代码（确切的链接已被删除）：

.navbar {
  font-family: 'Open Sans', sans-serif;
}
.navbar ul {
  list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
  display: block;
}
.navbar li a {
  display: block;
   color: white;
   text-align: center;
   padding: 10px;
  text-decoration: none;
}

 /* On-site navigation */
.leftnav li {
   float: left;
}
.leftnav li:hover {
  background-color: #111111;
}

/* Links to Social Media */
.medianav li {
  float: right;
}
.medianav li:nth-child(1) {
  background-color: #ff0000;
}
.medianav li:nth-child(1):hover {
  background-color: #ff6666;
}

.medianav li:nth-child(2) {
  background-color: #7289DA;
}
.medianav li:nth-child(2):hover {
  background-color: #99AAB5;
}

.medianav li:nth-child(3) {
  background-color: #1da1f2;
}
.medianav li:nth-child(3):hover {
  background-color: #49baff;
}

<nav class="navbar">
  <ul>
    <div class="leftnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="members.html">Members</a></li>
      <li><a href="smash.html">Smash Club</a></li>
    </nav>

    <div class="medianav">
      <li><a href="https://www.youtube.com">YouTube</a></li>
      <li><a href="https://discord.gg">Discord</a></li>
      <li><a href="#">Twitter</a></li>
    </nav>
  </ul>
</nav>

这就是它的样子：

但是，如果我对 html 执行此操作，这会让验证器感到高兴：

<nav class="navbar">
    <ul>
        <li class="leftnav"><a href="index.html">Home</a></li>
        <li class="leftnav"><a href="about.html">About</a></li>
        <li class="leftnav"><a href="members.html">Members</a></li>
        <li class="leftnav"><a href="smash.html">Smash Club</a></li>

        <li class="medianav"><a href="https://www.youtube.com">YouTube</a></li>
        <li class="medianav"><a href="https://discord.gg">Discord</a></li>
        <li class="medianav"><a href="#">Twitter</a></li>
    </ul>
</nav>

会发生这种情况：

那么我该如何解决这个问题？对不起，如果它很长，或者以前用不同的词问过，但我找不到任何其他资源。

【问题讨论】：

请注意，div 元素不允许作为 a` ul. The only permitted children are li. i fyou want to group li` 的子菜单使用子菜单。
从语义上讲，你没有一个列表，你有两个。如果您使用正确的语义标记您的内容，应用所需的样式会很简单。

标签： html css html-lists nav

【解决方案1】：

你可以使用两个ul的

<nav class="navbar">
    <ul class="leftnav">
    <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="members.html">Members</a></li>
       <li><a href="smash.html">Smash Club</a></li>
    </ul>
    <ul class="medianav">
       <li><a href="https://www.youtube.com">YouTube</a></li>
       <li><a href="https://discord.gg">Discord</a></li>
       <li><a href="#">Twitter</a></li>
   </ul>

你也需要调整你的CSS

.medianav, .medianav li {
    float: right;
}
.leftnav, .leftnav li {
   float: left;
}
.navbar, .navbar ul {
    list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
    display: block;
}

【讨论】：

【解决方案2】：

存在结构问题。现在 Nav 有 2 个列表

.navbar {
    font-family: 'Open Sans', sans-serif;
    background-color: #333333;
    padding: 0;
    min-height: 1px !important;
    /* Overrided the default min-height of navbar which is 50px by-default in Bootstrap */
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

/* Links to Social Media */

.medianav li:nth-child(1) {
    background-color: #ff0000;
}

.medianav li:nth-child(1):hover {
    background-color: #ff6666;
}

.medianav li:nth-child(2) {
    background-color: #7289DA;
}

.medianav li:nth-child(2):hover {
    background-color: #99AAB5;
}

.medianav li:nth-child(3) {
    background-color: #1da1f2;
}

.medianav li:nth-child(3):hover {
    background-color: #49baff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar">
    <ul class="navigation-links pull-left">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="members.html">Members</a></li>
        <li><a href="smash.html">Smash Club</a></li>
    </ul>
    <ul class="medianav pull-right">
        <li><a href="https://www.youtube.com">YouTube</a></li>
        <li><a href="https://discord.gg">Discord</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</nav>

【讨论】：

【解决方案3】：

您的 HTML 语法有点不对劲，您没有正确关闭 nav 和 div。尝试像这样编写您的 HTML，它对我有用：

<nav class="navbar">
    <ul>
        <div class="leftnav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="members.html">Members</a></li>
            <li><a href="smash.html">Smash Club</a></li>
        </div>

        <div class="medianav">
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://discord.gg">Discord</a></li>
            <li><a href="#">Twitter</a></li>
        </div>
    </ul>
</nav>

【讨论】：

【解决方案4】：

您打开两个<div> 标签并用</nav> 标签关闭它。只需将这两个</nav> 替换为</div>即可：

    .navbar {
    font-family: 'Open Sans', sans-serif;
}
.navbar ul {
    list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
    display: block;
}
.navbar li a {
    display: block;
   color: white;
   text-align: center;
   padding: 10px;
    text-decoration: none;
}

 /* On-site navigation */
.leftnav li {
   float: left;
}
.leftnav li:hover {
    background-color: #111111;
}

/* Links to Social Media */
.medianav li {
    float: right;
}
.medianav li:nth-child(1) {
    background-color: #ff0000;
}
.medianav li:nth-child(1):hover {
    background-color: #ff6666;
}

.medianav li:nth-child(2) {
    background-color: #7289DA;
}
.medianav li:nth-child(2):hover {
    background-color: #99AAB5;
}

.medianav li:nth-child(3) {
    background-color: #1da1f2;
}
.medianav li:nth-child(3):hover {
    background-color: #49baff;
}

<nav class="navbar">
    <ul>
        <div class="leftnav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="members.html">Members</a></li>
            <li><a href="smash.html">Smash Club</a></li>
        </div>

        <div class="medianav">
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://discord.gg">Discord</a></li>
            <li><a href="#">Twitter</a></li>
        </div>
    </ul>
</nav>

【讨论】：