Jak zapobiec rozpoczynaniu nowej linii przez tag DIV?

89

Chcę wyświetlić w przeglądarce jeden wiersz tekstu zawierający tag. Kiedy jest to renderowane, wydaje się, że DIV tworzy nową linię. Jak mogę dołączyć treść do znacznika DIV w tym samym wierszu - oto mój kod.

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

Próbowałem to tutaj uporządkować. Jak mogę to wyświetlić w jednej linii?

html css

— nieokreślony
źródło

Aby zaznaczyć, nie potrzebujesz nawiasów, gdy używasz echa. echo $id;jest tak samo ważne jak echo($id);.

— Eddie Hart

142

divZnacznik jest element blokowy, co powoduje, że działanie.

Zamiast tego powinieneś użyć spanelementu, który jest wbudowany.

Jeśli naprawdę chcesz użyć div, dodaj style="display: inline". (Możesz to również umieścić w regule CSS)

— SLaks
źródło

13

display: inlineZaprzecza tylko temu, do czego służy DIV, więc nie rób tego! Zamiast tego użyj zakresu.

— Robert K

28

Jestem tego świadomy; dlatego napisałem if you really want to.

— SLaks

22

Element div jest definiowany jako podział strony przed HTML5. Nie jest określony żadnymi cechami prezentacji. Innymi słowy, element div jest semantycznie odpowiedni zgodnie z definicją opartą na zawartości i zawartych w nim elementach. W rezultacie ustawienie div do wyświetlania: w tekście jest całkowicie w porządku i nie narusza żadnej semantyki ani standardowej definicji.

2

W moim przypadku nie mogłem użyć span, ponieważ chciałem zdefiniować właściwość zawijania wyrazów przerwania, a te działają tylko dla elementów typu blokowego. Ale nie mogłem użyć div, ponieważ nie chciałem nowej linii. Zamiast tego użyłem display: inline-blocki elementu div. Powiedz, co chcesz o stylu, ale to rozwiązało oba problemy.

— jsarma

U mnie to nie zadziałało! Spodziewałem się, że rozszerzy komórkę, w której znajduje się div, ale nic się nie zmieniło

— rezKesh

36

Nie jestem ekspertem, ale próbuję white-space:nowrap;

Właściwość odstępu jest obsługiwana we wszystkich głównych przeglądarkach.

Uwaga: ta wartość "inherit"nie jest obsługiwana w IE7 i starszych wersjach. IE8 wymaga !DOCTYPE. IE9 obsługuje "inherit".

— Shivanshu
źródło

Świetne, gdy potrzebujesz elementów inline-block, aby nie zawijać na końcu linii, gdy masz overflow: hiddenelement zawijania i przesuwasz go zgodnie z rodzicem "w tle" :)

— jave.web

16

div jest elementem blokowym, który zawsze zajmuje własną linię.

spanzamiast tego użyj tagu

— cobbal
źródło

10

Mylisz prezentację z funkcją. Element div zajmuje własną linię, ponieważ jest prezentowany jako display: block domyślnie i bez żadnego innego powodu.

1

Ale rozpiętość tworzy również podział linii przed i po?

— user3761308

6

Dodaj style="display: inline"do swojego div.

— Franz
źródło

5

użyj float: left na div i linku lub span.

— Jimmeh
źródło

1

Użyj właściwości css - white-space: nowrap;

— Jithjob Ignatious
źródło

0

Lepszym sposobem na zrobienie linii przerwania jest użycie span z parametrem w stylu CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

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

Przykład bezpośrednio w kodzie HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>

— Alex. Manfrin
źródło

-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
źródło

3

okropny pomysł na użycie javascript + php, kiedy można sobie poradzić tylko z css.

— ZurabWeb

@Piero Dlaczego tak mówisz? Dla aplikacji frontendowej zwykle potrzebny jest backend

— ciekawy

3

@ Ciekawe prawda, ale backend powinien zajmować się takimi rzeczami, jak obliczenia i przetwarzanie danych, podczas gdy frontend powinien zostać pozostawiony przeglądarkom do przetworzenia. Zmniejsza to obciążenie serwera i poprawia komfort użytkowania. To jest ogólnie. Jednak w tym konkretnym przypadku <a href="pagea.php?id=<?php echo $id; ?> "> Strona A </a> byłaby wystarczająca. A w przypadku getData.php, po co mieć parsowanie php i generowanie javascript, jeśli może to być obsługiwane przez apache? Na przykład: src = "getData.js? Id = <? Php echo $ id;?>"

— ZurabWeb

-2

Możesz po prostu użyć:

#contentInfo_new br {display:none;}

— user3012794
źródło