php array goes vertical instead of horizontal after styling - php

Question

I have an array of letters. After I added the styling, the array went from horizontal to vertical.
here is the code:
$alphabetical_array = range('a','z');
function AddLinks($letter)
{
$title = strtoupper($letter);
$a = "<a href='alpha_search.php?letter=".$letter."' class='alphabtn'><font color='#FFFFFF'>".$title."</font></a>";
return($a);
}
$format_array = array_map("AddLinks", $alphabetical_array);
echo implode($format_array);
here is the css:
.alphabtn {
max-width:10px;
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
clear: both;
text-indent:0;
display: block;
font: bold 12px/14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
border-radius: 4px;
border: 1px solid #391b61;
text-shadow: 1px 1px 1px #ccc;
background: -moz-linear-gradient(top, #864fd3 0%, #553285 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#864fd3), color-stop(100%,#553285));
background: -webkit-linear-gradient(top, #864fd3 0%,#553285 100%);
background: -o-linear-gradient(top, #864fd3 0%,#553285 100%);
background: -ms-linear-gradient(top, #864fd3 0%,#553285 100%);
background: linear-gradient(to bottom, #864fd3 0%,#553285 100%);
-pie-background: linear-gradient(#864fd3, #553285);
-webkit-box-shadow: inset 0px 1px 1px 1px #a55aff;
box-shadow: inset 0px 1px 1px 1px #a55aff;
behavior: url(../login/_ui/js/PIE.htc);
}.alphabtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #553285), color-stop(1, #864fd3) );
background:-moz-linear-gradient( center top, #553285 5%, #864fd3 100% );
background: -moz-linear-gradient(top, #553285 0%, #864fd3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#553285', endColorstr='#864fd3');
background-color:#553285;
}.alphabtn:active {
position:relative;
top:1px;
}

Answer 1

you have
clear: both;
set on your tag. pretty sure this will cause the
<a>
to be treated as block and break to a new line.
Try removing it.

Answer 2

You have display: block; in the css. That will cause each element to display on its own line. Remove it and everything else should be fine.

Answer 3

Change
.alphabtn {
max-width:10px;
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
clear: both;
text-indent:0;
display: block;
to
.alphabtn {
max-width:10px; //Why this line?
text-decoration: none;
position: relative;
padding: 5px ;
text-align:left;
text-indent:0;
display: inline-block; (or delete the row)