Question

我有一系列字母。添加样式后，阵列从水平变为垂直。

这是代码：

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

Answer 1

你有

clear: both;

设置您的代码。

非常肯定会导致

<a>

被视为阻止并且突破到新线。

尝试删除它。

Answer 2

你在css中有display: block;。这将导致每个元素显示在自己的行上。删除它，其他一切都应该没问题。

Answer 3

更改

.alphabtn {
    max-width:10px;
    text-decoration: none;
    position: relative;
    padding: 5px ;
    text-align:left;
    clear: both; 
    text-indent:0;
    display: block;

到

.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)

php数组在样式化后变为垂直而不是水平

3 个答案: