html - 跨度是垂直的

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 流中取出并放在单独的行上。

这是一个有效的 fiddle : http://jsfiddle.net/sg3s/bGMa9/2/

如果你想像 block 元素一样设置它们的样式但又不想让它们离开 tekst 流，你可以使用 display: inline-block 或使它们成为 block 级元素但使用 float: left; 让他们坐在一起。