html - CSS中的垂直线不占据整个边框

Question

我读了这篇文章:How to make a vertical line in HTML但高度样式不适用于 <th>标签

我的 CSS 是这样的:

.verticalLine
{
    width: 1px;
    background-color: Black;
    height: 10px;
}

我的 HTML 是这样的:

<th class="verticalLine"></th>

不幸的是，垂直线跨越了整个边界。我试过百分比而不是像素，但无济于事。

已编辑

.navCenter
{
text-align:center;
display:table-cell;
}
<nav style="margin-left:auto; margin-right:auto; width: 70%; height:55px;">
<table>
<tr class="navCenter">
<th><h2><a href="Home.aspx" style="padding: 2px; color: Blue;"><img src="Pictures/BartleHallToppers.jpg" height="42px" width="100px"/></a></h2></th>
<th class="verticalLine"></th>
<th><h2><a href="Events.aspx" style="padding: 2px; color: Blue; text-decoration: none;">Events</a></h2></th>
<th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Restaurants</a></h2></th>
<th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Hotels</a></h2></th>
<th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Points of Interest</a></h2></th>
<th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Public Works</a></h2></th>
<th><h2><a href="" style="padding: 2px; color: Blue; text-decoration: none;">Road Construction</a></h2></th>
<th><h2><a href="FAQ.aspx" style="padding: 2px; color: Blue; text-decoration: none;">Contact Us</a></h2></th>
</tr>
</table>
</nav>


Answer 1

使用表格不是创建导航的好习惯

你可以ul li 和边框伪

JS Fiddle

li:not(:last-child):after {
    content:"|";
    position:absolute;
    right:0;
    top:0;
}

或

li:not(:last-child):after {
    content:" ";
    width:1px;
    position:absolute;
    border-right:1px solid;
    right:0;
    top:0;
    bottom:0;
}