Comment faire en sorte que les éléments div s'affichent en ligne?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Étant donné ce code HTML:
<div>foo</div><div>bar</div><div>baz</div>
Comment les affichez-vous en ligne comme ceci:
foo bar baz
pas comme ça:
foo
bar
baz
La solution
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 -->
Autres conseils
Une div en ligne est un phénomène du web & amp; 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>
... répond à la question initiale ...
Essayez de l'écrire comme ceci:
div { border: 1px solid #CCC; } <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 à plusieurs reprises, je ne peux que supposer que des modifications ont été apportées et que je soupçonne que la mauvaise réponse vous a été fournie parce que vous n’en avez pas fourni suffisamment. information. Mon indice vient de l’utilisation de br balises.
Mes excuses à Darryl. Je lis class = & Quot; inline & Quot; as style = & "; display: inline &"; Vous avez la bonne réponse, même si vous utilisez des noms de classe sémantiquement douteux; -)
L’absence de divs utilisation pour fournir une mise en page structurelle plutôt que pour une mise en page textuelle est beaucoup trop répandue à mon goût.
Si vous souhaitez insérer plus que des éléments en ligne dans ces éléments div, vous devez les faire flotter plutôt que de les rendre inline.
Divs flottants:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divs en ligne:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Si vous êtes intéressé par l'ancien, voici la solution et perdez ces <=> balises:
<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 à leur attribuer une largeur si vous souhaitez contrôler le comportement.
Merci, Steve
Utilisez display:inline-block avec une requête de marge et de média 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 devez utiliser
<span>au lieu de<div>pour utiliser correctement inline . parce que div est un élément de niveau bloc et que votre exigence est pour les éléments de niveau inline-block.
Voici le code HTML correspondant à 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 simple
display:inline-block; - ou en utilisant
float:left;
afin que vous changiez de force la propriété d'affichage <=> avec force
Exemple 1
div {
display: inline-block;
}
Exemple deux
div {
float: left;
}
vous devez effacer le flottant
.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.
Utilisez simplement un div de wrapper avec & "; float: left &"; et mettre des cases à 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>
<span>?
Je voudrais utiliser des étendues ou laisser flotter la div à gauche. Le seul problème avec float est que vous devez effacer le float par la suite ou que le style de débordement de la div 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 être utile en pratique si vous voulez faire quelque chose comme des images de mosaïque avec des commentaires en dessous. par exemple. Picasaweb l'utilise pour afficher les vignettes d'un album.
Voir par exemple / démo, http: // clôture-bibliothèque. googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (classe goog-inline-block; je l'abrévie pour 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; }
Etant donné que CSS, définissez votre div en classe ib, et maintenant c'est un élément de bloc en ligne comme par magie.
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 dans le diviseur 'contenir'
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Je pense que vous pouvez utiliser cette méthode sans utiliser aucun css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
À l’heure actuelle, vous utilisez un élément de niveau bloc pour obtenir des résultats indésirables. Donc, vous pouvez vous élément en ligne comme span, petit etc.
<span>foo</span><span>bar</span><span>baz</span>
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 tendance à leur donner des largeurs fixes de sorte qu'elles totalisent la largeur totale de la page. Cela ne fonctionne probablement que si vous utilisez une page à largeur fixe. De plus, & "; Float &";
