Question

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

<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。我希望结果在单行中，它不会来。任何帮助都会非常有用。

Answer 1

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

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

如果你想将它们设置为块元素但不要让它们离开tekst流程，你可以使用display: inline-block或者使它们成为块级元素，但使用float: left;使它们彼此相邻。

Answer 2

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

<强>更新

你说你想要显示和隐藏元素。要使用内联元素执行此操作，只需将display设置为none以隐藏，并设置为''（空字符串）或inline以显示。

请参阅http://jsfiddle.net/bGMa9/4/

跨度正在垂直

2 个答案: