CSS学习之类目之间竖线的练习实例

近期在网站项目中的一次实践，使我再次遇到了关于类目间竖线设计的老话题。在浏览和琢磨诸多设计案例后，我意识到这是一个常见且重要的设计元素。

对于类目间的竖线设计，常见的做法有三种。第一种是背景图法，通过在每个a标签之间设置带有竖线的背景图来实现。这种方法需要在最后一个标签上额外添加类来隐藏背景。第二种方法则是直接使用“|”符号来分隔每个a标签。虽然这种方法直观简单，但它会使HTML文件变大，维护起来变得复杂。第三种方法则是使用a标签右侧的边框来实现竖线效果，与背景图法类似，但同样存在同样的缺点。

淘宝网站的设计方案则巧妙地利用了ul的overflow:hidden属性和li的margin-right:-1px来实现竖线效果。这种方法的优点在于它避免了上述所有缺点，现在越来越多的网站也开始采用这种设计方式。

接下来，让我尝试用代码来展示这种设计方式。首先是CSS部分：

```css

.topnav {

width: 264px;

float: right;

display: inline;

overflow: hidden;

}

.topnav ul {

margin: 0;

padding: 0;

}

.topnav li {

width: 66px;

height: auto;

float: left;

text-align: center;

border-right: 1px solid 736e6e;

margin-right: -1px;

}

```

然后是HTML部分：

```html

```

这种方式创建出的竖线设计既美观又实用，避免了常见的弊端。如果你也在为网站项目的类目间竖线设计而烦恼，不妨试试这种方法吧。