Question

此错误是导航栏的一部分（如下所示）：

<nav>
<ul>
    <div class="vr"></div>
    <li><a href="index.html" >Welcome</a></li>
    <div class="vr"></div>
    <li><a href="services.html" >Services</a></li>
    <div class="vr"></div>
    <li><a href="guestbook.html">Guestbook</a></li>
    <div class="vr"></div>
    <li><a href="locations.html" >Locations</a></li>
    <div class="vr"></div>
    <li><a href="contact.html">Contact Us</a></li>
    <div class="vr"></div>
</ul>

用（下图）设置样式：

nav {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 20px;
background-color: rgba(7, 7, 8, 0.85);
border: 1px solid white;}

ul {
list-style-type: none;
position: relative;
right: 10px;}

li {
display:inline-block;
width: 19%;
margin:auto;
text-decoration: none;
font-size: 1.2em;}

a{
color: white;
font-size: 1.2em;
text-decoration: none;}

.vr{
display: inline-block;
width: 1px;
background-color: white;
height: 20px;
margin: auto;
position: relative;
top: 1px;}

这会在每个导航项之间创建垂直线条效果。

注意：我尝试发布导航栏效果的图片，但由于这是我的第一篇文章，我没有足够的声誉，但如果你能提供帮助，我会发邮件给任何人

我的问题是，是否有人知道如何在不导致验证错误的情况下复制此内容？

在此上下文中，元素<div>不允许作为元素<ul>的子元素。

Answer 1

或者，您可以直接敲除额外标记并直接放置.vr线条样式 <li>喜欢这样

li {
    border-left: 1px solid white;
}

@ http://jsfiddle.net/cYxvw/

Answer 2

将列表元素放在内部，如下所示：

<ul>

<li><div class="vr"><a href="index.html" >Welcome</a></div></li>

<li><div class="vr"><a href="services.html" >Services</a></div></li>

<li><div class="vr"><a href="guestbook.html">Guestbook</a></div></li>

<li><div class="vr"><a href="locations.html" >Locations</a></div></li>

<li><div class="vr"><a href="contact.html">Contact Us</a></div></li>

</ul>

HTML验证错误：元素<div>不允许作为此上下文中元素<ul>的子元素</ul> </div>

2 个答案: