css - 分页 CSS 元素不在一行

Question

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

看起来像这样:

- _ _ -

例如:“-”= 照片； "_ "= 文本 page1 page2 等

我想像这样排队:

- - - -

我尝试了不同的方法来更改 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..!!