css 画竖线

css如何画竖线
1.前言。

   html如果直接敲"|"这个东西进页面,会出现对齐问题,所以,画竖线不能用这种,我总结了一下,大致有4种,这里只详细介绍其中两种。

2.画竖线的4种方法。

  (1)最优画法,用display的inline-block;
    a{
      border-left: 1px solid #B7D0E4;
       display: inline-block;
       margin-left: -1px;
       padding: 0px 0px 0px 3px;
     }
   (2)直接border.
     a{
        border-left: 1px solid #D9D9D9;
         margin-left: -1px;
         padding-left: 5px;
       }
    (3)table,这个比较强大,可以画连线。即div和div之间的连线,有兴趣可以研究下。

<table󰀊style="height:60px;border-

color:000000;border-left-style:solid;border-width:1px"><tr><td󰀊valign="top"></td></tr>

</table>


     (4)hr.

  (5)padding:

  span{

      padding:6px 6px 1px;

      margin-left:12px;

      border:2px solid red;

      font-size:0;}

如有其他画法,欢迎补充 : ) 
     

posted @ 2017-03-12 01:14  jjooee  阅读(1130)  评论(0)    收藏  举报