DIV dans une ligne

Question

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> 

regard de Div bien, mais ils endroits verticalement. Est-il possible de les placer horizontalement dans une ligne?

Span place dans la ligne, mais la largeur ne peut pas avoir la largeur comme n'importe quel élément en ligne. S'il n'y a aucun moyen d'utiliser DIV et SPAN pour ma tâche, je vais utiliser une table, mais je suis à la recherche de la solution no-table.

Answer 1

réponse de Lorenzo est correct, mais j'ajouter quelque chose à la balise:

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

en CSS, ajoutez:

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

Alors que le reste de vos affaires circulera correctement.

== Méthode alternative (De Jan et SitePoint) ==

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

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

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

Answer 2

Utilisez

display:inline-block 

dans le style de div

Answer 3

Utilisez cette

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

Answer 4

utilisation display:inline; et vos DIV sera en une ligne.

autre solution: float:left;

Answer 5

Vous pouvez essayer avec la combinaison de ul/li avec la liste de style (propriété CSS) comme aucun.

quelque chose comme

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

ou

vous pouvez essayer dans la table/tds intérieur divs.

Answer 6

xandy est correct, mais cela vaut 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 flotteurs est balisage. C'est comme utiliser <br> mais pour les flotteurs. Le balisage du contenu et du balisage est considéré comme une mauvaise pratique dans le web sémantique.

Lire this article pour plus d'informations.

Answer 7

Utiliser l'affichage: table-cellule; Il va résoudre votre problème d'alignement div dans l'ordre horizontal.

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

CSS

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