web-dev-qa-db-fra.com

Comment puis-je afficher deux div sur une seule ligne via la propriété en ligne css

J'essaie d'utiliser la propriété en ligne css pour faire afficher le nœud div sur une seule ligne, voici mon code

<html>
 <head>
  <style type="text/css">
   .inline { 
    display: inline; 
    border: 1px solid red; 
    margin:10px;
    }
  </style>
 </head>
 <body>
  <div>
   <div class='inline'><div>I'm here</div></div>
   <div class='inline'><div>I'm follow</div></div>
  </div>
 </body>
</html>

Le résultat n'est pas correct, les deux div avec la classe 'inline' s'affichent toujours sur deux lignes et la bordure est également incorrecte. Je ne sais pas ce qui se passe, qui peut m'aider?

merci

cssinline
14
user2155362

utilisation inline-block au lieu de inline. Lisez plus d'informations ici sur la différence entre inline et inline-block.

.inline { 
display: inline-block; 
border: 1px solid red; 
margin:10px;
}

[~ # ~] démo [~ # ~]

22
Suresh Ponnukalai

Vous n'avez pas besoin d'utiliser display:inline pour y parvenir:

.inline { 
    border: 1px solid red;
    margin:10px;
    float:left;/*Add float left*/
    margin :10px;
}

Vous pouvez utiliser float-left.

Utiliser float: left est le meilleur moyen de placer plusieurs éléments div sur une seule ligne. Pourquoi? Parce que le bloc en ligne a un problème lorsqu'il est affiché dans IE anciennes versions.

( violon

5
Alex Char