My (mostly technical) blog

I made up this solution inspired by the post and comments on this excellent blog

<a href="#" class="button add">Add</a>
<a href="#" class="button delete">Delete</a>

a.button{
display:block;
background-position: 6px;
background-repeat:no-repeat;
font-weight:bold;
font-family: Trebuchet MS, Tahoma, sans-serif;
font-size: 0.7em;
text-decoration:none;
text-indent:30px;
color:#555555;
background-color:#EAEAD7;
border:#CCCCCC solid 1px;
height:30px;
width:190px;
line-height:30px;
}

a:hover{
background-color:#F3F3E9;
color:#737373;
}

.add {
background-image:url(add.png);
}

.delete {
background-image:url(delete.png);
}

any idea how can I put those buttons next to each other instead of below each other?
I tried removing the display:block from the but the [...]