Question

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

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

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

由于

Answer 1

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

另一种方法是<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>。 <table>已弃用，不再适合用于此目的。

Answer 2

虽然我更喜欢使用UL作为菜单，用表格来实现效果似乎更容易。

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

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

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

导航栏边框

2 个答案: