Question

我遇到了以下问题：

我正在尝试在<p></p>标记之后添加包含内容和更多文本的div。我的问题是，我不想在段落标记之后换行。

这是我的代码：

<p>Some text</p>

<!-- Dropbox Daten -->
<div class="dropbox">
    <span class="project db_box" data-target="db_index_daten">Daten <i class="fa fa-info-circle"></i></span>
    <div class="details-dropbox" id="db_index_daten" hidden>
         <div class="box">
            <div class="box-text">
                <p style="text-align: left;">
                   Lorem Ipsum
                </p>
            </div>
        </div>
    </div>
</div>
<!-- /Dropbox Daten -->

所以想要它

Some text Data

而不喜欢

Some text
   Data

如果你需要别的东西，只需要它。

Answer 1

基本上你只需要在元素上设置display: inline;，它应该显示在一行中。

如果要在div上保留块属性，请使用display: inline-block;

p {
  display: inline;
}
.dropbox {
  display: inline-block;
}

您可以阅读有关display attribute on MDN的更多信息。这是一个有效的例子：

p {
  display: inline;
}
.dropbox {
  display: inline-block;
}

<p>some text some text some text some text some text some text some text some text some text</p>
<div class="dropbox">data</div>

Answer 2

尝试这个......

＆＃13;

p, .dropbox{
		  display: inline;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Stack Over flow</title>
</head>
<body>
    <p>Some text</p>

    <!-- Dropbox Daten -->
    <div class="dropbox">
        <span class="project db_box" data-target="db_index_daten">Daten <i class="fa fa-info-circle"></i></span>
        <div class="details-dropbox" id="db_index_daten" hidden>
             <div class="box">
                <div class="box-text">
                    <p style="text-align: left;">
                       Lorem Ipsum
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- /Dropbox Daten -->
</body>
</html>

＆＃13;

Html防止p和div之间的换行

2 个答案: