css 竖向tab |css table 显示网格

下面是一个简单的竖向tab示例，其中包含4个菜单项，它们被排成一个竖向序列：

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

<li><a href=”#”>Learn More</a></li>

</ul>

以下是一个简单的CSS样式表，用于调整竖向tab的样式：

list-style-type: none;

margin: 0;

padding: 0;

display: inline-block;

width: 100%;

height: 100%;

text-align: center;

line-height: 100%;

display: block;

text-decoration: none;

font-size: 16px;

font-weight: bold;

a:hover {

background-color: #e8e8e8;

在这个示例中，大家使用了display: inline-block；来使li标签垂直居中。width: 100%;height: 100%;text-align: center；和line-height: 100%；来使菜单项垂直居中并排成一个竖向序列。a标签的样式被设置为悬停时背景颜色为浅蓝色，以使菜单项更容易被用户找到。

使用CSS竖向tab可以轻松地创建竖向导航菜单，使用户更容易浏览页面并找到所需的内容。