1

我有一个网页的一部分（包含 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>s 因为我想改变这一行的样式，但是如果我使用上面的代码，或者如果我将 s 交换<p>为<div>s，则代码会呈现在多行上，如下所示：

降低

测试.txt

这里

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

在此处删除test.txt

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

4

5 回答 5

7

使用<span>而不是<p>.

于 2013-03-12T23:29:47.907 回答
4

<p>并且<div>都是块元素，默认情况下将在单独的行上显示其内容。您最好使用<span>将内联显示其内容的 a 。

<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像您那样在属性中定义它们，因为这将使您的页面变得更加复杂时更容易更改样式。

于 2013-03-12T23:32:51.413 回答
2

在您的 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

于 2013-03-12T23:29:46.643 回答
2

这是因为<p>它是块级元素，所以默认情况下会导致换行。你可以将其替换为内联元素（<span>）或将<p>显示设置为内联或内联块

于 2013-03-12T23:30:34.590 回答
2

我认为你可以使用<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>
于 2013-03-12T23:31:00.403 回答