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

【问题标题】：How to display inline <span> inside <div>?如何在 <div> 内显示内联 <span>？
【发布时间】：2017-10-22 12:04:03
【问题描述】：

如何在 div 元素中显示内联 span？我想以内联方式显示它们，并自动调整它们的大小和它们占用的空间，这取决于用户的屏幕，并且位于所有其他 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>

【问题讨论】：

内联块而不是块？ w3schools.com/css/css_inline-block.asp
您考虑过使用引导程序吗？它非常适合您的目的
Funk Doc，尝试使用块，但没有任何改变。 Pouyan，尝试完善并使用 CSS 来完成，我的下一步是 Bootstrap。

标签： html css block inline

【解决方案1】：

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

【讨论】：

【解决方案2】：

<span> 默认为inline，<div> 默认为block。但是在您的 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/

【讨论】：

你错过了第五个主要的 css
我会编辑我的帖子并删除第五个元素。 - pokeybit
benny - 非常感谢。它有效，但我怎样才能将 4 个盒子分成两行？
@pokeybit #fifth-main 没有样式。 @Petko Chakov，请查看我的 flexbox 解决方案，它比 inline 更现代，因为您要实现的目标:)
@PetkoChakov 将你想要的那些放在他们自己的<div class="whole"> 中的第二行。每个.whole 将是一行，跨度将在内部弯曲

【解决方案3】：

要将所有内容放在一行中，您需要使它们的宽度可以被总项目整除，因此在您的情况下，您需要 20% 的宽度来容纳 5 个跨度元素。（使用百分比时要小心，因为边距会将元素推到实际指定百分比）

对 span 元素使用display:inline-block;，并避免在一种情况下指定样式的重复代码。

* {
    margin:0px;
    padding:0px;
}
.whole {
    width: 100%;
    height: 400px;
    z-index: -1;
    position: relative;
}

.whole span {
    display:inline-block;
    width: 20%;
    height: 400px;

}

#main { 
    background-color: #212121;
    background-size: cover;

}

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

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

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

#fifth-main { 
    background-color: #dddddd;
    background-size: cover;
}

<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>

【讨论】：