0

我正在尝试在我的页面中实现分页。

<span height="40px"><span class="pg-normal" onclick="pager.prev();"> « Prev </span>
 |
<span id="pg1" class="pg-selected" onclick="pager.showPage(1);" style="display: block;">1</span>
<span id="sp1" style="display: block;">|</span>
<span id="pg2" class="pg-normal" onclick="pager.showPage(2);" style="display: block;">2</span>
<span id="sp2" style="display: block;">|</span>
<span id="pg3" class="pg-normal" onclick="pager.showPage(3);" style="display: block;">3</span>
    <span id="sp3" style="display: block;">|</span></span>

除了这个 CSS 问题，它几乎完成了。
我创建了一个JSFIDDLE。我想要它不会出现的单行结果。任何帮助都会非常有用。

4

2 回答 2

3

那是因为它们都具有display: block将它们从内联 tekst 流中取出并将它们放在单独的行上的样式。

这是一个有效的小提琴：http: //jsfiddle.net/sg3s/bGMa9/2/

如果您想将它们设置为像块元素一样的样式，但不让它们离开 tekst 流程，您可以使用display: inline-block或将它们设为块级元素，但用于float: left;使它们彼此相邻。

于 2012-04-09T13:33:37.080 回答
2

跨度是堆叠的，因为你给了它们display: block;。只需删除它，它们应该都是内联的。

更新

你说你想显示和隐藏元素。要使用内联元素做到这一点，只需设置display为none隐藏，设置为''（空字符串）或inline显示。

见http://jsfiddle.net/bGMa9/4/

于 2012-04-09T13:30:54.830 回答