Comment faire pour que les éléments div s'affichent en ligne?
Compte tenu de ce code HTML:
<div>foo</div><div>bar</div><div>baz</div>
Comment les faire afficher en ligne comme ceci:
Foo bar baz
Pas comme ça:
Foo
bar
baz
19 réponses
C'est autre chose alors:
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->Un div en ligne est un monstre du web et devrait être battu jusqu'à ce qu'il devienne une durée (au moins 9 fois sur 10)...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...les réponses à la question d'origine...
Essayez de l'écrire comme ceci:
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
Après avoir lu cette question et les réponses à quelques reprises, tout ce que je peux faire est de supposer qu'il y a eu un peu d'édition en cours, et mon soupçon est que vous avez reçu la réponse incorrecte basée sur ne pas fournir suffisamment d'informations. Mon Indice vient de l'utilisation de la balise br.
Toutes mes Excuses à Darryl. J'ai lu class = "inline" comme style = "display: inline". Vous avez la bonne réponse, même si vous utilisez des noms de classes sémantiquement discutables ;-)
La Miss utiliser de br pour fournir la mise en page structurelle plutôt que pour la mise en page textuelle est beaucoup trop répandue à mon goût.
Si vous voulez mettre plus d'éléments en ligne dans ces divs alors vous devriez flotter ces div plutôt que de les faire en ligne.
Divs flottants:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divs En Ligne:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Si vous êtes après le premier, alors c'est votre solution et perdez ces balises br:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
Notez que la largeur de ces divs est fluide, alors n'hésitez pas à mettre largeurs sur eux si vous voulez contrôler le comportement.
Merci, Steve
Utilisez display:inline-block avec une requête margin et media pour IE6 / 7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
Vous devriez utiliser
<span>au lieu de<div>pour la manière correcte de inline. parce que div est un élément de niveau bloc, et votre exigence est pour les éléments de niveau bloc en ligne.
Voici le code html selon vos besoins:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
Vous avez deux façons de le faire
- , en utilisant de simples
display:inline-block; - ou en utilisant
float:left;
Vous devez donc changer la propriété d'affichage display:inline-block; avec force
Exemple un
div {
display: inline-block;
}
L'Exemple de deux
div {
float: left;
}
, Vous devez effacer float
.main-div:after {
content: "";
clear: both;
display: table;
}
Comme mentionné, display: inline est probablement ce que vous voulez. Certains navigateurs prennent également en charge les blocs en ligne.
Il suffit D'utiliser un wrapper div avec "float: left" et de mettre des boîtes à l'intérieur contenant également float: left:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
Ok, pour moi :
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
J'utiliserais des spans ou flotter la div à gauche. Le seul problème avec floating est que vous devez effacer le flottant par la suite ou que le div contenant doit avoir le style de débordement défini sur auto
Je sais que les gens disent que c'est une idée terrible, mais cela peut en pratique être utile si vous voulez faire quelque chose comme des images en mosaïque avec des commentaires en dessous. par exemple, Picasaweb l'utilise pour afficher les vignettes dans un album.
Voir par exemple / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (classe goog-inline-block; Je l'abbreviate à ib ici)
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }
Étant donné que CSS, définissez votre div sur la classe ib, et maintenant c'est comme par magie inline élément de bloc.
Vous devez contenir les trois divs. Voici un exemple:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
Remarque: les attributs border-radius sont facultatifs et ne fonctionnent que dans les navigateurs compatibles CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Notez que les divs ' foo '' bar ' et ' baz 'sont chacun détenus dans le div' contain'.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
, Nous pouvons le faire comme
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */
J'ai juste tendance à leur faire des largeurs fixes afin qu'elles s'ajoutent à la largeur totale de la page - ne fonctionne probablement que si vous utilisez une page à Largeur fixe. Aussi "flotter".
Je pense que vous pouvez utiliser de cette façon sans utiliser de css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>