Как получить элемент <div>, который группирует <li>элементы внутри <ul>

Question

ОК, поэтому для моего сайта у нас есть панель навигации, которая использует список.У нас есть раздел элементов, которые плавают слева, и раздел, который плавают справа.Мой код работает отлично, просто валидатор W3 постоянно говорит мне, что у меня не может быть элемента div внутри элемента ul.Если бы я назначил каждому отдельному элементу 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>

Это происходит:

Так как мне это исправить?Извините, если он был длинным или был задан ранее другими словами, но я не смог найти другой ресурс.

Answer 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;
}

Answer 2

Ваш синтаксис 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>

Answer 3

Возникла проблема со структурой.теперь у 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>

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