关于html:CSS中的垂直线不会占据整个边框

Vertical Line in CSS that doesn't take up the whole border

我阅读了这篇文章:如何在HTML中制作垂直线
但是高度样式不适用于<th>标签

我的CSS是这样的:

1
2
3
4
5
6
.verticalLine
{
    width: 1px;
    background-color: Black;
    height: 10px;
}

我的HTML是这样的:

1
<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><img src="Pictures/BartleHallToppers.jpg" height="42px" width="100px"/></th>
<th class="verticalLine"></th>
<th>Events</th>
<th>Restaurants</th>
<th>Hotels</th>
<th>Points of Interest</th>
<th>Public Works</th>
<th>Road Construction</th>
<th>Contact Us</th>
</tr>
</table>
</nav>


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

您可以ul li并为边框pseudo

JS小提琴

1
2
3
4
5
6
li:not(:last-child):after {
    content:"|";
    position:absolute;
    right:0;
    top:0;
}

1
2
3
4
5
6
7
8
9
li:not(:last-child):after {
    content:"";
    width:1px;
    position:absolute;
    border-right:1px solid;
    right:0;
    top:0;
    bottom:0;
}

使用表格创建导航菜单不是最佳实践,但是如果将th放入table

,则代码必须能够正常工作

1
2
3
4
5
6
.verticalLine
{
    width: 1px;
    background-color: Black;
    height: 10px;
}
1
2
3
<table>
    <th class="verticalLine"></th>
</table>

`