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和边境pseudo

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

Answer 2

使用表格创建导航菜单不是最佳实践，但如果您将th放入table，则您的代码必须有效：

＆＃13;

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

＆＃13;

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

＆＃13;

`

CSS中的垂直线不占用整个边框

2 个答案: