Як запобігти започаткуванню нового рядка тегу DIV?


89

Я хочу вивести один рядок тексту в браузер, який містить тег. Коли це відображається, здається, що DIV викликає новий рядок. Як я можу включити вміст у тег div у тому ж рядку - ось мій код.

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

Я намагався навести тут порядок. Як я можу мати цей дисплей в одному рядку?


Тільки щоб зазначити, вам не потрібні дужки при використанні ехо. echo $id;діє так само, як echo($id);.
Едді Харт,

Відповіді:


142

divТег є блок - елемент, в результаті чого ця поведінка.

spanНатомість слід використовувати елемент, який є вбудованим.

Якщо ви дійсно хочете використовувати div, додайте style="display: inline". (Ви також можете помістити це в правило CSS)


13
Тільки display: inlineсуперечить тому, для чого призначений DIV, тому, будь ласка, не робіть цього! Замість цього використовуйте проміжок.
Роберт К

28
Я це добре знаю; тому я написав if you really want to.
Слакс

22
Div визначається як розділ сторінки до HTML5. Це не визначено з будь-якими характеристиками презентації. Іншими словами, div є семантично доречним відповідно до свого визначення на основі вмісту та елементів, які він містить. Як результат, цілком нормально встановити div для відображення: вбудований і не порушувати жодної семантики чи стандартного визначення.

2
У моєму випадку я не міг використовувати span, оскільки я хотів визначити властивість wrap word-break-word, і вони працюють лише для елементів типу block. Але я не міг використовувати div, бо не хотів нового рядка. Тому замість цього я використав display: inline-blockі елемент div. Скажіть, що ви хочете про стиль, але це вирішило обидві проблеми.
jsarma

У мене це не спрацювало! Я очікував, що це розширить клітинку, в якій знаходиться div, але змін не відбулося
rezKesh

36

Я не фахівець, але спробуй white-space:nowrap;

Властивість пробілу підтримується у всіх основних браузерах.

Примітка: Значення "inherit"не підтримується в IE7 та раніше. IE8 вимагає a !DOCTYPE. IE9 підтримує "inherit".


Чудово, коли вам потрібні елементи вбудованого блоку, щоб не обертати в кінці рядка, коли у вас є overflow: hiddenелемент обтікання, і ви переміщуєте його відповідно до батьківського "на задньому плані" :)
jave.web

16

div є блочним елементом, який завжди займає власну лінію.

використовуйте spanзамість цього тег


10
Ви плутаєте презентацію за функцією. Div займає власний рядок, оскільки він представлений як display: block за замовчуванням і не з інших причин

1
Але span також створює розрив рядка до і після?
user3761308


5

використовувати float: ліворуч на div та посиланні, або використовувати інтервал.



0

Кращий спосіб зробити лінію розриву - використання span з параметром стилю CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

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

Приклад безпосередньо у вашому 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
жахлива ідея використовувати javascript + php, коли ти можеш бути добре лише з css.
ZurabWeb

@Piero Чому ти так кажеш? Бекенд, як правило, потрібен для інтерфейсного додатка
Цікаво

3
@Curious true, але бекенд повинен мати справу з такими сервісними процесами, як обчислення та обробка даних, тоді як інтерфейс повинен залишатися для обробки браузерами. Це зменшує навантаження на сервер і покращує роботу користувачів. Це в загальних рисах. У цьому конкретному випадку, однак, <a href="pagea.php?id=<?php echo $id; ?> "> Сторінка A </a> було б досить добре. А з getData.php, навіщо розбирати php і виводити javascript, якщо це може обробляти apache? Ось так: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.