Question

脚本

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(200);
});
});
</script>

HTML

<div class="layer1">

<p class="heading">Into to paragraph</p>

<div class="content">The remainder of paragraph</div>

</div>

CSS

.layer1 {
margin: 0;
padding: 0;
}

.heading {
color: #bfbfbf;
cursor: pointer;
position: relative;
}
.content {
padding: 0px;
color: #bfbfbf;
margin: 0px;
}

我希望段落的其余部分继续在同一行。我尝试了内联，删除了p标签等。

提前谢谢！

Answer 1

将heading和content更改为span代码。

小提琴：http://jsfiddle.net/8pa3n/

Answer 2

将.heading和.content设置为display: inline或display: inline-block，这应该是您想要的。

Answer 3

.heading{
width:50%;
float:left;
}
.content{
width:50%;
float:left;
}

Answer 4

您可以提供内容类

display: inline

让它看起来像是在同一条线上。

OR

更合适的可能是使用两个span标签。

<span>paragraph 1</span>
<span>paragraph 2</span>

Answer 5

使用float: left

JSFiddle DEMO

.heading {
color: #bfbfbf;
cursor: pointer;
position: relative;
float: left;
}

.content {
float: left;
position: relative;
padding: 0px;
color: #bfbfbf;
margin: 0px;
}

Answer 6

最好在“标题”中附加下一段文字。通过并排添加不同的元素，在某些浏览器上可能效果不佳，如果“标题”之后的下一段太长，则可能导致其他元素的线条差异。

我如何将这两个分区一起添加？

6 个答案: