如何防止 DIV 标签开始新行？

Question

我想向包含标签的浏览器输出一行文本。 当它被渲染时，似乎 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>

我试着在这里整理一下。 我怎样才能在一行上显示这个显示？

Answer 1

div标签是一个块元素，导致该行为。

您应该使用span元素，它是内联的。

如果您真的想使用div ，请添加style="display: inline" 。 （你也可以把它放在 CSS 规则中）

Answer 2

我不是专家，但请尝试white-space:nowrap;

所有主流浏览器都支持 white-space 属性。

注意：IE7 及更早版本不支持值"inherit" 。 IE8 需要一个!DOCTYPE 。 IE9 支持"inherit" 。

Answer 3

div是一个块元素，它总是占据自己的行。

改用span标签

Answer 4

将style="display: inline"添加到您的 div。

Answer 5

在 div 和链接上使用 float:left，或使用跨度。

Answer 6

做断线的更好方法是使用带有 CSS 样式参数 white-space: nowrap; 的 span。

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>

Answer 7

使用 css 属性 - white-space: nowrap;

Answer 8

overflow-x: scroll;
width: max-content;

为我工作，希望这对其他人有帮助。

（用例：我连续有很多 div 中断到下一行，但在这种情况下我希望用户向右滚动）

Answer 9

2022年迟到的答案：

如果您使用 2 个 div 元素，则white-space: nowrap将不起作用，而是通过display: flex和flex-wrap: nowrap （默认启用）将它们包装成一个div 。

当您连续有多个 div 时，此解决方案效果很好，但在小屏幕设备中响应时，您需要其中 2 个始终位于同一行。 inline解决方案无法实现这一点（除非使用 nowrap）。

 div.wrapper-whitespace, div.wrapper-whitespace-with-inline { white-space: nowrap; } div.wrapper-whitespace-with-inline > div.item { display: inline; } div.wrapper-flex { display: flex; flex-wrap: nowrap; /* this is default */ } div.item { border: 1px solid black; width: 100px; }

 <div class='item'>div</div> <div class='item'>div</div> <br> <div class='wrapper-whitespace'> <div class='item'>div</div> <div class='item'>div</div> </div> <br> <div class='wrapper-whitespace-with-inline'> <div class='item'>div</div> <div class='item'>div</div> </div> <br> <div class='wrapper-flex'> <div class='item'>div</div> <div class='item'>div</div> </div>

Answer 10

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

Answer 11

您可以简单地使用：

#contentInfo_new br {display:none;}