CSS - The border of the list is not displayed

advertisements

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/


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

a { display: block; }