如何具有将<ul>内的<li>元素分组的<div>元素

时间：2018-11-14 14:30:29

标签： html css html-lists nav

好的，因此对于我的网站，我们有一个使用列表的导航栏。我们有一部分元素向左浮动，而一部分则向右浮动。我的代码运行完美，只是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>

这是它的外观： And this is what it has to look like

但是，如果我对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>

发生这种情况： This happens

那我该如何解决呢？很抱歉，是很长的时间，还是以前用不同的语言问过这个问题，但是我找不到其他资源。

4 个答案:

答案 0 :(得分：2)

您可以使用两个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;
}

答案 1 :(得分：0)

存在结构问题。现在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>

答案 2 :(得分：-1)

您打开两个<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>

答案 3 :(得分：-1)

您的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>
相关问题
最新问题