css中箭头按钮一上一下不对齐怎么办

html-css015

css中箭头按钮一上一下不对齐怎么办,第1张

用另外一个元素包裹一下就可以了, 代码如下

<span class="arrow down">

  <div></div>

 </span>

样式代码如下

.arrow{

  display:inline-block

  width:60px

  height:40px

}

.arrow div{

  width:0

  height:0

  border-left:30px solid transparent

  border-right:30px solid transparent

}

.arrow.down div{

  border-top:40px solid #666666

  border-bottom:none

}

.arrow.up div{

  border-top:none

  border-bottom:40px solid #666666

}

测试用的js(jquery)代码如下

$(".arrow").click(function (){

      if($(this).hasClass("down")){

        $(this).removeClass("down").addClass("up")

      }

      else{

        $(this).removeClass("up").addClass("down")

      }

    })

附件是完整代码

首页要有这人箭头的背景图，然後放到DIV中，再在DIV中设置一个Table

样式为border-collapse:collapse

border='1'

j最后就是把背景图压到表格的上边框中

具体的座标，这个要用Javascript去自己实现