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

中显示内联<跨度>。

如何在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>

默认情况下

<span> inline，默认情况下block <div>。但是在你的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/

要将所有内容都放在一行中，您需要让它们的宽度被总项目整除，因此在您的情况下，您需要 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>

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

相关内容

最新更新

热门标签：