css - 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 看起来不错，但它们是垂直放置的。有什么方法可以将它们水平排成一行吗？

span 在一行中的位置，但 span 不能像任何内联元素那样具有宽度。如果无法使用 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%;
}

清除 float 的元素是标记。这就像使用 <br>但对于花车。混合标记和内容在语义 Web 中被认为是不好的做法。

阅读this article获取更多信息。