Vertical Line in CSS that doesn't take up the whole border
我阅读了这篇文章:如何在HTML中制作垂直线
但是高度样式不适用于
我的CSS是这样的:
1 2 3 4 5 6 | .verticalLine { width: 1px; background-color: Black; height: 10px; } |
我的HTML是这样的:
1 | <th class="verticalLine"></th> |
不幸的是,垂直线跨越了整个边界。我尝试了百分比而不是像素,但无济于事。
已编辑
{
text-align:center;
display:table-cell;
}
<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>
使用表格不是创建导航的好习惯
您可以
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; } |
使用表格创建导航菜单不是最佳实践,但是如果将
,则代码必须能够正常工作
1 2 3 4 5 6 | .verticalLine { width: 1px; background-color: Black; height: 10px; } |
1 2 3 | <table> <th class="verticalLine"></th> </table> |
`