Question

我希望页面中的菜单如下所示：关于我们|联系方式|地图。我有一个代码：

<div id="headermenu">
    <ul>
        <li> <a title="About us" href="index.php?id=about"><?php  echo $meniu['about']; ?></a></li> |
        <li> <a title="Contacts" href="index.php?id=contacts"><?php  echo $meniu['contacts']; ?></a></li> |
        <li><a title="Map" href="index.php?id=map"><?php  echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li>
    </ul>
</div>

然而，HTML验证器不喜欢这个想法并给我一个错误：“这里不允许使用字符数据”并建议删除|。但我不想！我该怎么办？

Answer 1

设置列表样式以使列表项水平显示（例如display: inline-block;），并将其左边框或右边框设置为medium solid black。

ul { display: block; }
li { display: inline-block; border-left: medium solid black;
     padding: 0 1ex; margin: 0; /* some spacing is nice */ }
li:first-child { border-left: none; }

ul元素内不得有任何字符数据;那里只允许li个元素。所以删除那些吧。

Answer 2

也许尝试在border-right元素中添加li。当然，最后一个li不需要它。

Answer 3

你可以把它放在<li>里面，因为验证者抱怨文本在它之外。

但更好的解决方案可能是使用CSS创建一个垂直条，通过在除最后一个<li>之外的所有区域设置一个右边框（给最后一个类，所以你可以清除边框设置一个）。

Answer 4

像这样并使用边距使其看起来很好：

<div id="headermenu">
    <ul>
        <li> <a title="About us" href="index.php?id=about"><?php  echo $meniu['about']; ?></a></li>
        <li>|</li>
        <li> <a title="Contacts" href="index.php?id=contacts"><?php  echo $meniu['contacts']; ?></a></li>
        <li>|</li>
        <li><a title="Map" href="index.php?id=map"><?php  echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li>
    </ul>

HTML验证程序错误

4 个答案: