Question

我有一个网页的一部分（包含Bootstrap CSS），其中包含一个<div>，其ID为“drop-zone”，稍后我会在javascript中提取以实现拖放功能：

<div id="drop_zone">
    <p style="color: darkgray">Drop</p>
    <p style="color: black">test.txt</p>
    <p style="color: darkgray"> here</p>
</div>

我有<p>因为我希望改变这一行的样式，但如果我使用上面的代码，或者我将<p>交换为<div> } s，代码在多行上呈现，如下所示：

放弃

的test.txt

这里

当我真的希望它看起来像：

在此处删除 test.txt

我确信这是一个简单的解决方法，但这里有什么想法吗？

Answer 1

使用<span>代替<p>。

Answer 2

<p>和<div>都是块元素，默认情况下它们将在单独的行中显示其内容。你最好使用<span>，它将内联显示其内容。

<div id="drop_zone"><span style="color: darkgray">Drop</span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>

您应该考虑将所有样式移动到样式表中，而不是像在style属性中那样定义它们，因为这会使页面变得更复杂时更容易更改样式。

Answer 3

在你的div或p标签中尝试以下内容，或者更好地创建一个具有此属性的类：

display : inline;

或

display : inline-block;

<div id="drop_zone" style='display:inline;'><p style="color: darkgray; display:inline;"> Drop </p><p style="color: black; display:inline;"> test.txt </p><p style="color: darkgray;  display:inline;'"> here</p></div>

这是jsdfiddle

Answer 4

这是因为<p>是块级元素，因此默认情况下会导致换行符...您可以用内联元素（<span>）替换它或设置{{ 1}}显示为内联或内联块

Answer 5

我认为您可以使用<span>代替<p>

<div id="drop_zone"><span style="color: darkgray">Drop </span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>

如何在<div> </div>中的同一行上更改样式

5 个答案: