html - 导航栏边框

Question

我一直在试图弄清楚如何在这里制作一个像这样的导航栏：navbar

但作为一个几乎绝对的初学者，我不知道在这里使用哪种方法。它是 UL 还是表格，也不知道如何在链接之间设置这些边界，这些边界很可能应该作为图像插入那里。

我知道如果我在这里编写自己的代码先进行检查会更有帮助，但我什至不知道我应该使用表格还是列表。所以，如果有人可以先给我一个建议，然后我可以编写一个我们可以进一步讨论的代码，我将非常感激。

谢谢

Answer 1

虽然我更喜欢在菜单上使用 UL，但使用表格似乎更容易实现效果。

尝试制作一个两行五列的表格。

和：删除第一行的底部边框。删除第二行的上边框。第二行单元格的边框。

您也可能需要设置每行的高度。

Answer 2

这可以通过两种不同的方式完成。第一个将带有一条小垂直线的图像，它将被设置为导航按钮的背景。

<span>另一种方法是在标签中进行绝对定位<a>，高度为这个边框高度并设置top: 0和left:0。

HTML：

<ul>
    <li><a href="#"><span></span>Nav 1</a></li>
    <li><a href="#"><span></span>Nav 2</a></li>
    <li><a href="#"><span></span>Nav 3</a></li>
    <li><a href="#"><span></span>Nav 4</a></li>
</ul>

CSS：

ul {
    float:left; 
    border: 1px solid #000;
}

ul li {
    list-style-type: none;
    float:left;
}

ul li a {
    display:block; 
    padding: 10px;
    position:relative; 
}

ul li span {
    border-left: 1px solid #000;
    height: 10px; <!-- as long as you want -->
    position:absolute; 
    top: 0; 
    left: 0;
}

您可以将其复制并粘贴到您的编辑器中，然后查看它的外观。

对于导航，请使用<ul>' <li>s. 已<table>弃用，不再适合将其用于此目的。