0

私は文字の配列を持っています。スタイルを追加した後、配列は水平から垂直になりました。

コードは次のとおりです。

$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);

ここに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;
}
4

3 に答える 3

1

あなたが持っている

clear: both;

タグに設定します。かなり確かにこれは

<a>

ブロックとして扱われ、新しい行に分割されます。

削除してみてください。

于 2013-04-24T22:15:37.397 に答える