CSS-布局样式之筛选条件右边线的处理方法（no CSS3）
先上图：
这个地方的竖线，首先他不用css3的nth-child或last-child的选择器来解决的话，还有什么更好的方法呢？
如果我还用上次优惠券那种，加一个<b>的话，类似如下
以后不可能就三个标签，以后程序往里边传东西肯定又会改变了，
于是鄙人开始寻找大型网站的相同效果的处理方法
找到三种处理方法
1：易车惠：http://www.huimaiche.com/ 底部的外网链接
他的处理方式是a+em，em包含竖线。
但这种的布局，首先a是独立的内联元素，没有固定搭档的说法，不像li和ul，dd和dt。所以他可以和span做兄弟。
其次，他的兄弟数量是固定下来的，不用后台再传进来东西。
而我这种页面布局，最终数目都是看用户的心情，到底几个都是随机的，不可能会有固定数目的。
2：天猫首页侧边导航栏这个斜线：
处理方法是几个文字用a标签包裹，而斜线写在a标签之间，作为li标签的内容文本。
人家这种处理方式适合，文字与装饰线条都是统一颜色，另外文字用一个链接就行了很单纯。
不像现在面临的这种布局——其特点在于：
（1）：有一个需要dt标签来存放的一级目录；
（2）：二级目录和斜线的颜色不一样；
（3）：二级目录之间，除了不变的汉字，还有需要更改的数值，如图：
全部和5要分开标签吧。结构很零碎，想做到简单很麻烦。
3：天猫首页搜索栏下边的热点导航条：
他这种，竖线使用border写的，很符合我的要求。更惊喜的是：其实现方法也打开了我的新思路，有句话怎么说来着，茅厕顿开。哈哈哈：
看到这种布局，像我这种菜鸟，第一时间想到的肯定是用border-right实现吧！但是！他用border-left实现的。。
我想我看到他border-left后，瞬间恍然大悟他的处理方式了。
我还在想，难道第一个li要用css3的first-child？那和last-child 没有什么不同吧。
结果我看第一个li，还有啊！border-left还在啊！没有用border：none处理掉啊！
经过盒模型的显示，我才看懂他使用了margin的负边距布局这个经典方法啊。
如下：盒模型图
Ul的爹地div
ul
就是，让ul的margin-left为负值，把第一个li左边的border给推出去啊。
关键点是，div还要设置overflow：hidden；不然这个魔术是变不成功的啊。
另外，这种做法中，border是加在li上边的，li的line-height:1.1；没有单位，这样的话，竖线和文字的高度是一样的，不会出现那种冒出头的雨后春笋。
我后来自己设计的时候，把border给了dd内部的a标签，然后让第一个a 的margin-left为-2，让dd的overflow：hidden，然后把line-height给了dd，
bug接踵而至，三个dd就和dt变得在一个高度上了，
行高给了a却没用，竖线还是出头，于是我就给了dd也给了dt，这样，高度就想通了。
最后，上代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="author" content "郭菊锋,702004176@qq.com"/>
7 <title>list</title>
8 <style type="text/css">
9 * {
10 margin: 0;
11 }
12
13 a {
14 text-decoration: none;
15 }
16
17 a:hover {
18 cursor: pointer;
19 }
20
21 li {
22 list-style: none;
23 }
24
25 .clearfix:after {
26 visibility: hidden;
27 display: block;
28 font-size: 0;
29 content: "";
30 clear: both;
31 height: 0;
32 }
33
34 .clearfix {
35 *zoom: 1;
36 }
37
38 .menu {
39 width: 1100px;
40 margin: 130px auto;
41 padding: 10px;
42 background: #DFE9F6;
43 font-size: 16px;
44 border-bottom: 1px dashed #DB7093;
45 }
46
47 .menu dt {
48 float: left;
49 color: #999;
50 line-height: 1.1;
51 }
52
53 .menu dd {
54 float: left;
55 overflow: hidden;
56 line-height: 1.1;
57 }
58
59 .menu dd a {
60 padding: 0 12px;
61 color: #333;
62 border-left: 2px solid #DB7093;
63 }
64
65 .menu dd.menu_active a,
66 .menu dd a:hover {
67 color: #DB7093
68 }
69 </style>
70 </head>
71
72 <body>
73 <dl class="menu clearfix">
74 <dt>品牌：</dt>
75 <dd class="menu_active">
76 <a href="#" title="" style="margin-left: -2px;">全部</a>
77 </dd>
78 <dd>
79 <a href="#" title="">第一</a>
80 </dd>
81 <dd>
82 <a href="#" title="">第二</a>
83 </dd>
84 <dd>
85 <a href="#" title="">第三</a>
86 </dd>
87 <dd>
88 <a href="#" title="">第四</a>
89 </dd>
90 </dl>
91 </body>
92 </html>
