分页CSS元素不符合

Question

我的照片left.png, leftdisabled.png, right.png, rightdisabled.png是55 x 33，看起来不像我想要的那样，

它看起来像这样：

- _ _ -

ex：“ - ”=照片;     “_”=文本第1页第2页等

我希望看起来像：

- - - -

我尝试以不同的方式更改CSS中的值但不起作用，我该怎么办？

我目前的CSS

div.pagination a.prev {  border: 0 none; }
div.pagination a:hover.prev {  background: none; border: 0 none; }


div.pagination a.next { border: 0 none; }
div.pagination a:hover.next { background: none; border: 0 none; }


div.pagination { margin: 20px; padding: 3px; text-align: center; font-size: 12px; color: #333;  }
div.pagination a { margin: 2px; padding: 2px 5px 2px 5px; text-decoration: none; border: 1px solid #11540C; color: #11540C;  }
div.pagination a:hover, div.pagination a:active { background: #11540C; border: 1px solid #11540C; color: #fff; }
div.pagination span.current { background: #11540C; margin: 2px; padding: 2px 5px 2px 5px; border: 1px solid #11540C; color: #fff; font-weight:bold; }
div.pagination span.disabled { margin: 2px; padding: 2px 5px 2px 5px; }

和一个JSFiddle：

http://fiddle.jshell.net/nG9FV/

Answer 1

<强> HTML

<div id="pagination" class="pagination">    
    <span class="disabled">
        <img src="http://a.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/arrow_left.png" class="numer" />
    </span>
    <span ><a title="Pag 1" id="current"  class="numer" href="?pg=1">1</a></span>
    <span><a title=" Pag 2" class="numer" href="?pg=2">2</a></span>
    <span><a class="next" title="Inainte" href="?pg=2"><img src="http://b.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/right_arrow.png" class="numer"/></a>
    </span>

</div>

<强> CSS

div.pagination a.prev {
    border: 0 none;
}
div.pagination a:hover.prev {
    background: none;
    border: 0 none;
}
div.pagination a.next {
    border: 0 none;
}
div.pagination a:hover.next {
    background: none;
    border: 0 none;
}
div.pagination {
    margin: 20px;
    padding: 3px;
    text-align: center;
    font-size: 12px;
    color: #333;
}
div.pagination a {
    margin: 2px;
    padding: 2px 5px 2px 5px;
    text-decoration: none;
    border: 1px solid #11540C;
    color: #11540C;
}
div.pagination a:hover, div.pagination a:active {
    background: #11540C;
    border: 1px solid #11540C;
    color: #fff;
}
div.pagination span #current {
    background: #11540C;
    margin: 2px;
    padding: 2px 5px 2px 5px;
    border: 1px solid #11540C;
    color: #fff;
    font-weight:bold;
}
div.pagination span.disabled {
    margin: 2px;
    padding: 2px 5px 2px 5px;
}

span
{
    display:inline-block;
    float:left;
    text-align:center;
}
span .numer
{
    width:90px;
    height:90px;
    font-size:44pt;
}
span .numer img
{
    width:90px;
    height:90px;
    border:1px red solid;
}

Updated Fiddle of your's..!!

Answer 2

用链接替换所有4个span / a对象 用班级控制它们 例：当前关闭指针光标。 并使用float: left;
如果你愿意，我可以提供小提琴链接。