Come posso impedire al tag DIV di iniziare una nuova riga?

89

Voglio inviare una singola riga di testo al browser che contiene un tag. Quando viene eseguito il rendering, sembra che DIV causi una nuova riga. Come posso includere il contenuto nel tag div sulla stessa riga: ecco il mio codice.

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

Ho provato a rimetterlo in ordine qui. Come posso avere questo display su una singola riga?

html css

— non definito
fonte

Solo per sottolineare, non hai bisogno delle parentesi quando usi l'eco. echo $id;è valido quanto echo($id);.

— Eddie Hart

142

Il divtag è un elemento di blocco, che causa quel comportamento.

Dovresti spaninvece usare un elemento, che è in linea.

Se vuoi davvero usare div, aggiungi style="display: inline". (Puoi anche inserirlo in una regola CSS)

— SLaks
fonte

13

È solo in display: inlinecontraddizione con lo scopo del DIV, quindi per favore non farlo! Usa invece lo span.

— Robert K

28

Ne sono ben consapevole; ecco perché ho scritto if you really want to.

— SLaks

22

Un div è definito come una divisione di una pagina, prima dell'HTML5. Non è definito con alcuna caratteristica di presentazione. In altre parole, un div è semanticamente appropriato in base alla sua definizione basata sul contenuto e sugli elementi che contiene. Di conseguenza è perfettamente corretto impostare un div da visualizzare: inline e non violare alcuna semantica o definizione standard.

2

Nel mio caso, non potevo usare span, perché volevo definire una proprietà di ritorno a capo automatico delle parole di interruzione e quelle funzionano solo per elementi di tipo blocco. Ma non potevo usare div, perché non volevo una nuova riga. Così invece ho usato display: inline-blocke un elemento div. Dì quello che vuoi sullo stile, ma questo ha risolto entrambi i problemi.

— jsarma

Non ha funzionato per me! Mi aspettavo che espandesse la cella in cui si trova div, ma non è avvenuta alcuna modifica

— rezKesh

36

Non sono un esperto ma ci provo white-space:nowrap;

La proprietà white-space è supportata in tutti i principali browser.

Nota: il valore "inherit"non è supportato in IE7 e versioni precedenti. IE8 richiede un file !DOCTYPE. IE9 supporta "inherit".

— Shivanshu
fonte

Ottimo quando hai bisogno di elementi inline-block da non andare a capo alla fine della riga quando hai overflow: hiddensull'elemento wrap e lo sposti in base al genitore "sullo sfondo" :)

— jave.web

16

div è un elemento di blocco, che occupa sempre una propria linea.

usa spaninvece il tag

— acciottolato
fonte

10

Stai confondendo la presentazione per la funzione. Un div occupa la propria riga perché si presenta come display: block per impostazione predefinita e per nessun altro motivo.

1

Ma span crea anche un'interruzione di riga prima e dopo?

— user3761308

6

Aggiungi style="display: inline"al tuo div.

— Franz
fonte

5

usa float: left sul div e sul link, oppure usa uno span.

— Jimmeh
fonte

1

Usa la proprietà css - white-space: nowrap;

— Jithjob Ignatious
fonte

0

Un modo migliore per fare una linea di interruzione è usare span con il parametro di stile CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

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

Esempio direttamente nel tuo 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

pessima idea di usare javascript + php, quando puoi stare bene solo con css.

— ZurabWeb

@Piero Perché dici questo? Di solito è necessario un backend per un'app front-end

— Curioso

3

@ Curioso vero, ma il backend dovrebbe occuparsi di cose di backend come i calcoli e la gestione dei dati, mentre il frontend dovrebbe essere lasciato all'elaborazione dei browser. Ciò riduce il carico del server e migliora l'esperienza dell'utente. Questo è in termini generali. In questo caso particolare, tuttavia, la <a href="pagea.php?id=<?php echo $id; ?> "> Pagina A </a> sarebbe sufficiente. E con getData.php, perché avere php che analizza e restituisce javascript se questo può essere gestito da apache? In questo modo: src = "getData.js? Id = <? Php echo $ id;?>"

— ZurabWeb

-2

Puoi semplicemente usare:

#contentInfo_new br {display:none;}

— user3012794
fonte