Как предотвратить начало новой строки тегом 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>

Я попытался привести это в порядок здесь. Как я могу отобразить это в одной строке?

html css

— неопределенный
источник

Отметим, что при использовании echo скобки не нужны. echo $id;действует так же, как echo($id);.

— Эдди Харт

142

divТег представляет собой блок - элемент, в результате чего это поведение.

spanВместо этого вы должны использовать встроенный элемент.

Если действительно хотите использовать div, добавляйте style="display: inline". (Вы также можете добавить это в правило CSS)

— SLaks
источник

13

Только display: inlineпротиворечит тому, для чего предназначен DIV, поэтому, пожалуйста, не делайте этого! Вместо этого используйте диапазон.

— Роберт К.

28

Я хорошо это знаю; вот почему я написал if you really want to.

— SLaks 01

22

До HTML5 div определяется как раздел страницы. Не определяется никакими характеристиками презентации. Другими словами, div семантически подходит в соответствии с его определением, основанным на содержании и элементах, которые он содержит. В результате вполне нормально настроить div на display: inline и не нарушать какую-либо семантику или стандартное определение.

2

В моем случае я не мог использовать span, потому что я хотел определить свойство переноса слов прерывания, а оно работает только для элементов блочного типа. Но я не мог использовать div, потому что мне не нужна была новая строка. Поэтому вместо этого я использовал display: inline-blockи элемент div. Что угодно о стиле, но это решило обе проблемы.

— jsarma

У меня не сработало! Я ожидал, что он расширит ячейку, в которой находится div, но никаких изменений не произошло

— rezKesh 02

36

Я не эксперт но попробую white-space:nowrap;

Свойство white-space поддерживается во всех основных браузерах.

Примечание. Это значение "inherit"не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. IE9 поддерживает "inherit".

— Шиваншу
источник

Отлично, когда вам нужно, чтобы элементы inline-block не оборачивались в конце строки, когда у вас есть overflow: hiddenэлемент wrap и вы перемещаете его в соответствии с родительским «на фоне» :)

— jave.web

16

div это блочный элемент, который всегда занимает отдельную строку.

spanвместо этого используйте тег

— коббал
источник

10

Вы путаете презентацию с функцией. Div занимает свою собственную строку, потому что по умолчанию он представлен как display: block и ни по какой другой причине.

1

Но span также создает разрыв строки до и после?

— user3761308

6

Добавьте style="display: inline"в свой div.

— Франц
источник

5

используйте float: left в div и ссылке или используйте диапазон.

— Джимме
источник

1

Использовать свойство css - white-space: nowrap;

— Jithjob Ignatious
источник

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>

— Dfilkovi
источник

3

ужасная идея использовать javascript + php, когда вы можете справиться только с css.

— ZurabWeb

@ Пьеро Почему ты так говоришь? Бэкэнд обычно необходим для внешнего приложения

— Любопытно,

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

-2

Вы можете просто использовать:

#contentInfo_new br {display:none;}

— user3012794
источник