Html 导航栏边框

我一直在想如何制作像这样的导航条：

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

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

---

谢谢

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

另一种方法是在

CSS:

ul{
浮动：左；
边框：1px实心#000；
}
ulli{
列表样式类型：无；
浮动：左；
}
ullia{
显示：块；
填充：10px；
位置：相对位置；
}
李斯潘{
左边框：1px实心#000；
高度：10px；
位置：绝对位置；
排名：0；
左：0；
}

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

---

对于导航，请将

与
一起使用。
已被弃用，不再适合用于此目的。
尽管我更喜欢使用UL作为菜单，
使用表格似乎更容易达到效果

尝试创建一个包含两行和5列的表

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

此外，您可能需要设置每行的高度。
是否需要边框完全如图所示？是的，Hasan，完全相同。这真的不容易。。。当然，带表格的布局是90年代和2000年代初的答案。如果你喜欢这种方式，你最好使用
display:table cell
而不是tables。我知道除了表格数据以外，永远不应该使用表格：），但这似乎是一个家庭作业，而且是由“几乎是一个绝对的初学者”完成的。。因此，有时我们应该考虑情况，而不是仅仅责备别人（我：P）的史前答案；我不怪你，但更愿意教别人正确的方法。他已经知道菜单是用ul创建的：）我也更喜欢教别人正确的方法：）所以下次请不要说：
这真的不容易。。。当然，带表格的布局是90年代和2000年代初的答案。如果你喜欢这种方式，你最好使用display:table cell而不是tables。
试着说：
Hasan，我相信这应该用ul来做，因为它是制作菜单的正确方式：）
| | | | | | | | | | | | | | | |所以-底线-我们都同意“菜单是用ul创建的”：）П！我刚刚在我的编辑器中测试了这一点，这正是我想要实现的，尽管我仍然不知道如何将第五项添加为空项，以及如何为第一项和第五项设置不同的大小。我知道，这听起来可能很愚蠢，但我警告过你我是个初学者：）好吧，我做到了——不知怎么的！：）虽然还有一个问题。你可以看到我在这里做了什么：[demo][1][1]：现在，我希望是最后一个问题。我使用了填充顶部和左侧来定位框内的链接，但这使它们原来仍然可以单击的位置保持不变。因此，不仅文本是可点击的，而且所有用填充创建的空间也是可点击的。我现在该怎么做才能摆脱它？再次感谢！您应该将边距放置到
而不是，或者只使用边距，而不使用填充。
<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>

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