使用页面的全部宽度(如连续文本)将多个div内联。

Question

我遇到了两个div的问题，因为他们不想在网上显示他们的内容。

我将完整的代码上传到jsfiddle：https://jsfiddle.net/w76pswwn/

正如你在小提琴里看到的

        <div class="storymode inline">
          <span class="action-Cutscene">
            <p>
              On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
            </p>
          </span>
        </div>

        <div class="storymode inline">
          <span class="action-Cutscene">
            <p>
              On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
            </p>
          </span>
        </div>

展示方式如下：

在一个寒冷的冬夜，布兰卡和巨像之间的一个史诗故事在一场强大的战斗中结束了，这场战斗发生在纽约市的一架摩天大楼上。

在一个寒冷的冬夜，布兰卡和巨像之间的一个史诗故事在一场强大的战斗中结束了，这场战斗发生在纽约市的一架摩天大楼上。

但我想：

在一个寒冷的冬夜，布兰卡和巨像之间的一个史诗故事在一场强大的战斗中结束了，这场战斗发生在纽约市的一架摩天大楼上。在一个寒冷的冬夜，布兰卡和巨像之间的一个史诗故事在一场强大的战斗中结束了，这场战斗发生在纽约市的一架摩天大楼上。

我试过inline, inline-block和float，但是我遗漏了一些东西。但是什么呢？

提前感谢您的帮助！

PS:我不能更改HTML结构。至少不容易！因此，请提出建议，以配合这一结构。

Answer 1

p元素必须是inline，否则它们将覆盖该属性。

小提琴：https://jsfiddle.net/byuqbqLL/2/

Answer 2

给p和.inline显示:内联；

p {
display: inline;
}
.inline {
display: inline 
}

就像这样：https://jsfiddle.net/w76pswwn/2/

Answer 3

在p中使用span是无效的，因为span是内联元素，p是块元素，内联元素不应该作为子元素。

要么将p更改为span，要么将span更改为div。如果后者需要让div和p以内联方式显示，如下面的示例所示

如果您患有无法更改标记现象，下面的CSS也将对现有标记进行处理。

​

.inline { display:inline; }

.inline div, .inline p {
  display: inline;
}

<div class="storymode inline">
  <div class="action-Cutscene">
    <p>
      On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
    </p>
  </div>
</div>

<div class="storymode inline">
  <div class="action-Cutscene">
    <p>
      On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
    </p>
  </div>
</div>

​