Div dans une ligne

Voici mon 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 à l'air bien mais ils places à la verticale. Est-il possible de les placer horizontalement sur une ligne?

Span place dans la ligne, mais la durée ne peut pas avoir la même largeur que tout élément inline.
Si il n'y a aucun moyen de l'utilisation de DIV et SPAN, pour mon travail, je vais utiliser un tableau, mais je suis à la recherche pour la table de la solution.

OriginalL'auteur demas | 2010-10-31

  1. 4

    Lorenzo réponse est bonne, mais je voudrais ajouter quelque chose à l'annotation:

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

    dans le CSS, ajouter:

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

    De sorte que le reste de vos affaires iront correctement.

    ==Méthode Alternative (à Partir de Janvier, et SitePoint) ==

    Pas besoin d'avoir de la div.pageHolder-pied de page (mais gardez pageHolder). Et puis:

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

    Ils les deux peuvent avoir des inconvénients, mais cela dépend de ce dont vous avez besoin.

    ou .pageHolder{ overflow: auto; }
    Quel est le but de pageHolder-pied?
    vous avez manqué le point. Coz flotteur gauche peut faire de la div.pageHolder est devenu zéro à hauteur, ajouter le pied de page et effacer la gauche est de faire de la pageHolder pouvez réellement "envelopper" le contenu; et aussi le reste des trucs (comme p ou span) de ne pas rester à côté de ceux div.page, overflow:auto n'aide pas à résoudre ce problème.
    oui, il est l'un des mieux gardés CSS secrets. Essayez-le et vous ne serez jamais utiliser de vide inutile éléments div pour effacer les flotteurs.
    si cela fonctionne, il serait intéressant (et propre). thx, je vais définitivement le regarder.

    OriginalL'auteur xandy

  2. 11

    xandy est correct, mais c'est mieux:

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

    avec CSS:

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

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

    Éléments pour effacer les flotteurs est de balisage. C'est comme utiliser <br> mais pour des flotteurs. Mélange de balisage et le contenu est considéré comme une mauvaise pratique dans le web sémantique.

    Lire cet article pour plus d'informations.

    +1 C'est la meilleure solution.

    OriginalL'auteur Jan

  3. 4

    Utilisation

    display:inline-block

    dans le div style

    juste une chose: inline-block n'est pas pris en charge dans IE6 et n'a pas bien jouer à IE7.
    Dans ce cas DIV n'aura pas de largeur 🙂
    avec inline-block ils seront. Pour ie7 solution de contournement, vous pouvez regarder ici robertnyman.com/2010/02/24/...
    J'utilise firefox, et ils ont l'air span.

    OriginalL'auteur Samuel

  4. 3

    Utiliser cette

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

    OriginalL'auteur Lorenzo

  5. 3

    utilisation display:inline; et votre div seront en une seule ligne.

    autre solution : float:left;

    'display:inline' n'aura pas de largeur; float:left est une bonne solution. merci.

    OriginalL'auteur Samuel De Backer

  6. 2

    Utiliser display: table-cell; Il permettra de résoudre votre problème de div dans l'alignement horizontal.

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

    CSS

     .content > div{
     display: table-cell;
  }
    Fonctionne parfaitement avec les sorties d'Impression trop! Merci!

    OriginalL'auteur jforjs

  7. 1

    Vous pouvez essayer avec la combinaison de ul/li avec une liste de style ( css propriété ), car aucun.

    quelque chose comme 

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

    ou

    vous pouvez essayer dans le tableau /tds à l'intérieur de divs.

    Pourquoi div li? Si vous mettez de l'ul et li juste parce que vous voulez style, c'est totalement hors de le point.

    OriginalL'auteur kadalamittai