CSS - Border for list doesn't show

Question

html:

<li>
    <a href="">text<span></span></a>
</li>

css:

ul{
    list-style:none
}
li{
  float: left  
}
a{
    padding: 10px;
    border: 1px solid #000;
}

In chrome the right border doesn't show up:

image: i.imgur.com/OycFyOk.png

FF and Safari works fine.

Example code in fiddle:

http://fiddle.jshell.net/yrntrapk/

Answer 1

You need to put display: block; to the "a" element:

a { display: block; }

Answer 2

删除HTML上的Empty span标签应该是对此的最快解决方法。