如何在 <div> 内显示内联 <span>？

Question

如何在 div 元素内显示内联跨度？我想以内联方式显示它们，并自动调节它们的大小和它们占用的空间，取决于用户的屏幕，并位于所有其他 div 元素的后面。

 body {

width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: scroll;

    .whole {
        width: 100%;
        height: 400px;
        display: inline-block;
        margin: 0px 0px 0px 240px;
        z-index: -1;
        position: relative;
    }

    #main {
        background-color: #212121;
        width: 50%;
        height: 400px;
        display: block;

    }

    #second-main {
        background-color: #424242;
        width: 50%;
        height: 400px;
        display: block;
    }

    #third-main {
        background-color: #616161;
        width: 50%;
        height: 400px;
        display: block;
    }

    #fourth-main {
        background-color: #757575;
        width: 50%;
        height: 400px;
        display: block;
    }

     <div class = "whole">
                <span id="main">
                    <p></p>
                </span>

                <span id="second-main">
                    <p></p>
                </span>

                <span id="third-main">
                    <p></p>
                </span>

                <span id="fourth-main">
                    <p></p>
                </span>

                <span id="fifth-main">
                    <p></p>
                </span>
    </div>

原文由 user7426697 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<span> 默认是 inline ，和 <div> 是 block default-cea640fad3caa8b995acd-但是在您的 CSS 中，您将使用 display: block 覆盖这些默认样式（在 #main 等中）。如果您希望它们像屏幕一样调整大小，并且是内联的，总体上更好的方法就是使用 flexbox ：

HTML:

 <div class="whole">
  <span id="main">
      <p></p>
  </span>
  <span id="second-main">
      <p></p>
  </span>
  <span id="third-main">
      <p></p>
  </span>
  <span id="fourth-main">
      <p></p>
  </span>
  <span id="fifth-main">
      <p></p>
  </span>
</div>

CSS：

 body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  overflow: scroll;
}

.whole {
  width: 100%;
  height: 400px;
  -ms-display: flexbox;
  display: flex;
  margin: 0px 0px 0px 240px;
}

.whole > span {
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

#main {
  background-color: #212121;
}

#second-main {
  background-color: #424242;
}

#third-main {
  background-color: #616161;
}

#fourth-main {
  background-color: #757575;
}

（您还缺少 body 的右 CSS 括号，并且您的 font-size: 100% 在下一行中被速记 font 规则覆盖）

这是一个工作小提琴： https ://jsfiddle.net/tceqx58x/

原文由 Benny Schmidt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 display: inline-block 而不是 display: block ，并将宽度减小到 20% 以适应跨度元素中整个类中的所有跨度。

原文由 Bharath Kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议