如何防止 DIV 标记启动新行？

我想输出一行文本到包含标记的浏览器。当呈现这个属性时，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>

我已经试着把它整理好了。我怎么能把这个显示器放在一条线上呢？

195811 次浏览
小开

div is a block element, which always takes up its own line.

use the span tag instead

小开

use float:left on the div and the link, or use a span.

小开

Add style="display: inline" to your div.

小开 
<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>
小开
最佳答案

The div tag is a block element, causing that behavior.

You should use a span element instead, which is inline.

If you really want to use div, add style="display: inline". (You can also put that in a CSS rule)

小开

I am not an expert but try white-space:nowrap;

The white-space property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

小开

You can simply use:

#contentInfo_new br {display:none;}
小开

Use css property - white-space: nowrap;

小开

A better way to do a break line is using span with CSS style parameter white-space: nowrap;

span.nobreak {
white-space: nowrap;
}


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

Example directly in your HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
小开 
overflow-x: scroll;
width: max-content;

Worked for me, hope this helps someone else.

(Use case: I had a lot of divs in a row that were breaking to the next line, but I wanted the user to scroll to the right instead in this case)

小开

Late answer in 2022:

If you are using 2 div element, white-space: nowrap won't works, instead wrap them by a div by display: flex along with flex-wrap: nowrap (which is default enabled).

This solution work well when you have multiple divs in a row, but you need 2 of them always on the same row when responsive in small screen device. inline solution can't achieve this (unless with 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>


提交答案