如何用css将元素放在一行？

Question

我有一些文章因标签更改而中断。显然，文本的第二部分以新的一行开头。我怎么把它放在一行？我尝试将display: inline添加到<p>。但这就是“名字”的位置。改变。

<span id="page170" title="170">
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span>  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
</span>
<span id="page171" title="171">
    <p class="_10_Lesetext_02_Txt"> together Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</span>

Fiddle

修改

在这里你可以看到它应该是什么样子：

Answer 1

使用div代替span，因为span不能包含p作为孩子，请执行此操作：

UPDATE 将其包装在一个块元素中，然后提供text-indent然后添加一些padding-left

article {
  text-indent: -2em;
  padding-left: 50px
}
div,
p {
  display: inline
}
p._10_Lesetext_02_Txt_lb {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-left: 9px;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt_lb_tab {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 2;
}
span.semibold-semicondensed {
  font-family: "Source Sans Pro Semibold", sans-serif;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 600;
}
span._idGenCharOverride-1 {
  font-size: 0.958em;
}

<article>
  <div id="page170" title="170">
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
  </div>
  <div id="page171" title="171">
    <p class="_10_Lesetext_02_Txt">together Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
</article>

Answer 2

只需添加

span,p{
  display:inline;
  }

到你的样式表，它运作正常。

＆＃13;

＆＃13;

span,p{
  display:inline;
  }
p._10_Lesetext_02_Txt_lb {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-left: 9px;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent: -9px;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt_lb_tab {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-indent:-9px;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 2;
}
span.semibold-semicondensed {
  font-family: "Source Sans Pro Semibold", sans-serif;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 600;
}
span._idGenCharOverride-1 {
  font-size: 0.958em;
}

＆＃13;

<span id="page170" title="170">
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span>  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
</span>
<span id="page171" title="171">
    <p class="_10_Lesetext_02_Txt"> together Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过在CSS中添加以下代码来实现此目的：

span, p {
    display: inline;
}

你可以在这里看到一个有效的例子： https://jsfiddle.net/b5ou6gsf/2/