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?


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

Odpowiedzi:


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)


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".


Ś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


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




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>

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

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.