Div's in one line

Here is my code:

<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's look fine but they places vertically. Is there any way to place them horizontally in one line?

Span's place in the one line, but the span can not have the width as any inline element. If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.

xandy is correct, but this is better:

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

with CSS:

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

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

Elements to clear floats is markup. It's like using <br> but for floats. Mixing markup and content is considered bad practice in semantic web.

Read this article for more information.

Use

display:inline-block

in the div's style

Lorenzo's answer is correct, but I would add something to the markup:

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

in CSS, add:

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

So that the rest of your stuff will flow correctly.

==Alternative method (From Jan, and SitePoint) ==

No need to have the div.pageHolder-footer (but keep pageHolder). And then:

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

They both may have drawbacks, but it depends on what you need.

use display:inline; and your div's will be in one line.

other solution : float:left;

Use this

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

Use display: table-cell; It will solve your issue of div alignment in horizontal order.

<div class="content">
   <div> Page1</div>
   <div>Page 2</div>
   <div>Page 3</div>
</div>

CSS

 .content > div{
     display: table-cell;
  }

You can try out with the combination of ul/li with list-style ( css property ) as none.

some thing like

<ul> <li> <div ....</li> <li><div...></li></ul>

or

you can try within table / tds inside divs.