Div在一条线上

Question

这是我的代码:

<style type="text/css">
    div.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }

    span.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }
 </style>


<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>

<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>

Div看起来很好但是它们垂直放置.有没有办法将它们水平放置在一条线上？

跨度在一行中的位置,但跨度不能具有任何内联元素的宽度.如果没有办法使用DIV和SPAN来完成我的任务,我将使用一个表,但我正在寻找无表解决方案.

Answer 1

xandy是正确的,但这更好:

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
</div>

用CSS:

.page {
  text-align:center;
  border: 1px solid rgb(0,0,0);
  width:20px;
  height:20px;              
  float: left;
}

.pageHolder{
  overflow: auto;
  width: 100%;
}

清除浮动的元素是标记.这就像使用<br>浮子一样.混合标记和内容在语义Web中被认为是不好的做法.

阅读本文以获取更多信息.

Answer 2

使用

display:inline-block

在 div 的风格中

Answer 3

洛伦佐的答案是正确的，但我会在标记中添加一些内容：

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    <div class='pageHolder-footer'></div>
</div>

在 CSS 中添加：

div.pageHolder-footer{
    clear: left;
    height: 0;
}

这样你的其余部分就会正确流动。

==替代方法（来自Jan和SitePoint）==

不需要 div.pageHolder-footer （但保留 pageHolder）。进而：

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

它们都可能有缺点，但这取决于您的需要。