如何防止 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;}