Como evito que a tag DIV inicie uma nova linha?

86

Quero produzir uma única linha de texto para o navegador que contém uma tag. Quando isso é renderizado, parece que o DIV causa uma nova linha. Como posso incluir o conteúdo na tag div na mesma linha - aqui está o meu código.

<?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>

Eu tentei arrumar aqui. Como posso ter este display em uma única linha?

html css Indefinido
fonte
Só para ressaltar, você não precisa dos colchetes ao usar o eco. echo $id;é tão válido quanto echo($id);.
Eddie Hart

Respostas:

137

A divtag é um elemento de bloco, causando esse comportamento.

Você deve usar um spanelemento, que é embutido.

Se você realmente deseja usar div, adicione style="display: inline". (Você também pode colocar isso em uma regra CSS)

SLaks
fonte
13
Apenas display: inlinecontradiz para que serve o DIV, então, por favor, não faça isso! Em vez disso, use a extensão.
Robert K
27
Estou bem ciente disso; é por isso que escrevi if you really want to.
SLaks 01 de
20
Um div é definido como uma divisão de uma página, antes do HTML5. Não está definido com nenhuma característica de apresentação. Em outras palavras, um div é semanticamente apropriado de acordo com sua definição com base no conteúdo e nos elementos que contém. Como resultado, é perfeitamente normal definir um div para exibir: inline e não violar nenhuma semântica ou definição padrão.
2
No meu caso, eu não poderia usar span, porque eu queria definir uma propriedade de quebra de linha de quebra de linha, que só funciona para elementos do tipo bloco. Mas não pude usar div, porque não queria uma nova linha. Então, em vez disso, usei display: inline-blockum elemento div. Diga o que quiser sobre estilo, mas isso resolveu os dois problemas.
jsarma
Não funcionou para mim! Eu esperava que ele expandisse a célula em que div está, mas nenhuma mudança aconteceu
rezKesh
36

Eu não sou um especialista mas tento white-space:nowrap;

A propriedade de espaço em branco é compatível com todos os principais navegadores.

Observação: o valor "inherit"não é compatível com IE7 e anteriores. O IE8 requer um !DOCTYPE. Suporta IE9 "inherit".

Shivanshu
fonte
Ótimo quando você precisa que elementos de bloco embutido não quebrem no final da linha quando você tem overflow: hiddeno elemento de quebra e o move de acordo com o pai "no fundo" :)
jave.web
16

div é um elemento de bloco, que sempre ocupa sua própria linha.

use a spantag em vez

cobbal
fonte
10
Você está confundindo apresentação com função. Um div assume sua própria linha porque é apresentado como display: block por padrão e por nenhum outro motivo.
1
Mas a extensão também cria uma quebra de linha antes e depois?
user3761308
6

Adicione style="display: inline"ao seu div.

Franz
fonte
5

use float: à esquerda no div e no link ou use um intervalo.

Jimmeh
fonte
1

Use a propriedade css - espaço em branco: nowrap;

Jithjob Ignatious
fonte
0

A melhor maneira de fazer uma quebra de linha é usar span com o parâmetro de estilo CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

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

Exemplo diretamente em seu HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
Alex. Manfrin
fonte
-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
fonte
3
péssima ideia de usar javascript + php, quando você pode ficar bem apenas com css.
ZurabWeb
@Piero Por que você diz isso? Normalmente, é necessário um back-end para um aplicativo de front-end
Curioso
3
@Curious é verdade, mas o back-end deve lidar com coisas de back-end como cálculos e manipulação de dados, enquanto o front-end deve ser deixado para os navegadores processarem. Isso reduz a carga do servidor e melhora a experiência do usuário. Isso é em termos gerais. Neste caso particular, entretanto, <a href="pagea.php?id=<?php echo $id; ?> "> Página A </a> seria boa o suficiente. E com getData.php, por que ter php parse e javascript de saída se isso pode ser tratado pelo apache? Assim: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb de
-2

Você pode simplesmente usar:

#contentInfo_new br {display:none;}
user3012794
fonte