Comment empêcher la balise DIV de commencer une nouvelle ligne?

89

Je souhaite afficher une seule ligne de texte dans le navigateur contenant une balise. Lorsque cela est rendu, il apparaît que le DIV provoque une nouvelle ligne. Comment puis-je inclure le contenu dans la balise div sur la même ligne - voici mon code.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

J'ai essayé de le ranger ici. Comment puis-je avoir cet affichage sur une seule ligne?

html css indéfini
la source
Juste pour souligner, vous n'avez pas besoin des crochets lorsque vous utilisez echo. echo $id;est aussi valide que echo($id);.
Eddie Hart

Réponses:

142

La divbalise est un élément de bloc, provoquant ce comportement.

Vous devez utiliser un spanélément à la place, qui est en ligne.

Si vous voulez vraiment utiliser div, ajoutez style="display: inline". (Vous pouvez également mettre cela dans une règle CSS)

SLaks
la source
13
Ne display: inlinecontredit que ce à quoi sert le DIV, alors ne le faites pas! Utilisez plutôt la travée.
Robert K
28
J'en suis bien conscient; c'est pourquoi j'ai écrit if you really want to.
SLaks
22
Un div est défini comme une division d'une page, avant HTML5. Ce n'est pas défini avec des caractéristiques de présentation. En d'autres termes, un div est sémantiquement approprié selon sa définition basée sur le contenu et les éléments qu'il contient. En conséquence, il est parfaitement bien de définir un div à afficher: en ligne et de ne violer aucune sémantique ou définition standard.
2
Dans mon cas, je ne pouvais pas utiliser span, car je voulais définir une propriété wrap word break-word, et ceux-ci ne fonctionnent que pour les éléments de type bloc. Mais je ne pouvais pas utiliser div, car je ne voulais pas de nouvelle ligne. Donc, à la place, j'ai utilisé display: inline-blocket un élément div. Dites ce que vous voulez sur le style, mais cela a résolu les deux problèmes.
jsarma
Cela n'a pas fonctionné pour moi! Je m'attendais à ce qu'il élargisse la cellule dans laquelle se trouve div, mais aucun changement ne s'est produit
rezKesh
36

Je ne suis pas un expert mais j'essaye white-space:nowrap;

La propriété d'espace blanc est prise en charge dans tous les principaux navigateurs.

Remarque: la valeur "inherit"n'est pas prise en charge dans IE7 et les versions antérieures. IE8 nécessite un !DOCTYPE. IE9 prend en charge "inherit".

Shivanshu
la source
Idéal lorsque vous avez besoin d'éléments de bloc en ligne pour ne pas envelopper à la fin de la ligne lorsque vous avez overflow: hiddensur l'élément wrap et que vous le déplacez selon le parent "en arrière-plan" :)
jave.web
16

div est un élément de bloc, qui prend toujours sa propre ligne.

utilisez spanplutôt la balise

cobbal
la source
10
Vous confondez présentation et fonction. Un div prend sa propre ligne car il est présenté comme display: block par défaut et pour aucune autre raison.
1
Mais span crée également un saut de ligne avant et après?
user3761308
6

Ajoutez style="display: inline"à votre div.

Franz
la source
5

utilisez float: à gauche sur le div et le lien, ou utilisez un span.

Jimmeh
la source
1

Utilisez la propriété css - white-space: nowrap;

Jithjob Ignatious
la source
0

Une meilleure façon de créer une ligne de rupture est d'utiliser span avec le paramètre de style CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Exemple directement dans votre HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
Alex. Manfrin
la source
-1 
<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>
dfilkovi
la source
3
mauvaise idée d'utiliser javascript + php, alors que vous pouvez vous contenter de CSS.
ZurabWeb
@Piero Pourquoi dites-vous ça? Un backend est généralement nécessaire pour une application frontale
Curieux
3
@Curious est vrai, mais le backend doit gérer des éléments tels que les calculs et la gestion des données, tandis que le frontend doit être laissé aux navigateurs. Cela réduit la charge du serveur et améliore l'expérience utilisateur. C'est en termes généraux. Dans ce cas particulier, cependant, la <a href="pagea.php?id=<?php echo $id; ?> "> Page A </a> suffirait. Et avec getData.php, pourquoi avoir php parse et sortie javascript si cela peut être géré par apache? Comme ça: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb
-2

Vous pouvez simplement utiliser:

#contentInfo_new br {display:none;}
user3012794
la source