显示块标签不能包含文本

Question

我正在创建用于测试的图片集。有一个包含图片的框架标签和另一个包含文本的标签，其背景颜色为黄色，半透明可见。

很遗憾，黄色标签不能包含文本。我相信这个问题是由display: block 风格引起的。

由于黄色标签不能包含文本，因此会创建 overflow-x 并将文本移动到标签旁边：

HTML 和 CSS：

<div class="inv_display" style="height: 500px; display: block;">
                <ul class="inv_form" style="list-style-type:none;overflow-y: scroll;">
                    <li><label style="color: white;font-family: 'Lato';font-size: 1.5em;display: block;margin-bottom: 15px;margin-top: 10px;margin-left: 10px;">Pics</label></li>
                    <li><div style="width: 100%;height:355px;">
                        <div style="position:absolute;overflow-y: scroll;">
                            <ul class="item_menu" style="padding-top: 10px; padding-left: 15px; list-style-type: none; overflow-y: scroll; display: block;">

                                <li><label id="l_Ovk3rmwF3xR" class="inv_items" style="width:120px;height:120px;background-color:#1d1e1e;cursor: pointer;float:left;margin-right:15px;text-align: center;padding-top: 0;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;"><img style="width: 90%;height: 85%;display: inline-block;margin-top: 10%;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;" src="http://i.imgur.com/bpYwZ7q.jpg"></label><label style="position: relative;width: 120px;display: block;height: 120px;background-color: rgba(244, 176, 66, 0.5);color: white;">Panda</label></li>

                                <li><label id="l_0vk3rmwF3xG" class="inv_items" style="width:120px;height:120px;background-color:#1d1e1e;cursor: pointer;float:left;margin-right:15px;text-align: center;padding-top: 0;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;"><img style="width: 90%;height: 85%;display: inline-block;margin-top: 10%;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;" src="http://i.imgur.com/GuAuaa7.jpg"></label><label style="position: relative;width: 120px;display: block;height: 120px;background-color: rgba(244, 176, 66, 0.5);color: white;">Tiger</label></li>

                            </ul>
                        </div>
                    </div></li>
                </ul>
            </div>

<style>
    .inv_display {
      min-width: 600px;
      position: relative;
      left: 5%;
      background-color: black;
      border: 1px solid white;
    }
    .inv_form {
        display: block;
        position: relative;
        width: 100%;
        padding: 10px;
        margin: 0;
        overflow-x:auto;
        overflow-y:hidden;
        white-space: nowrap;
        text-align: left;
    }
    .inv_form li {
        margin-bottom: 15px;
    }
</style>

请参阅Fiddle with full code 和Embedded result。

同样，文本应该在黄色标签覆盖层内，但它会移到它旁边。

问题可能是什么？有没有办法让文本节点适合显示块标签？如果没有，是否有其他解决方案？

Answer 1

您想使用绝对定位将第二个标签放在第一个标签之上。

.inv_display {
  min-width: 600px;
  position: relative;
  left: 5%;
  background-color: black;
  border: 1px solid white;
}

.inv_form {
  display: block;
  position: relative;
  width: 100%;
  padding: 10px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: left;
}

.inv_form li {
  margin-bottom: 15px;
}


/* new css */

.item_menu li {
  position: relative;
  float: left;
  clear: both;
}

.item_menu label {
  display: block;
}

.item_menu li label:last-child {
  background-color: rgba(244, 176, 66, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

<div class="inv_display" style="height: 500px; display: block;">
  <ul class="inv_form" style="list-style-type:none;overflow-y: scroll;">
    <li>
      <label style="color: white;font-family: 'Lato';font-size: 1.5em;display: block;margin-bottom: 15px;margin-top: 10px;margin-left: 10px;">Pics</label>
    </li>
    <li>
      <div style="width: 100%;height:355px;">
        <div style="position:absolute;overflow-y: scroll;">
          <ul class="item_menu" style="padding-top: 10px; padding-left: 15px; list-style-type: none; overflow-y: scroll; display: block;">

            <li>
              <label id="l_Ovk3rmwF3xR" class="inv_items" style="width:120px;height:120px;background-color:#1d1e1e;cursor: pointer;text-align: center;padding-top: 0;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;"><img style="width: 90%;height: 85%;display: inline-block;margin-top: 10%;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;" src="http://i.imgur.com/bpYwZ7q.jpg"></label>
              <label style="color: white;">Panda panda panda panda panda</label>
            </li>

            <li>
              <label id="l_0vk3rmwF3xG" class="inv_items" style="width:120px;height:120px;background-color:#1d1e1e;cursor: pointer;text-align: center;padding-top: 0;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;"><img style="width: 90%;height: 85%;display: inline-block;margin-top: 10%;user-select: none;-webkit-user-select: none;-ms-user-select: none;moz-user-select: none;" src="http://i.imgur.com/GuAuaa7.jpg"></label>
              <label style="color: white;">Tiger tiger tiger tiger</label>
            </li>

          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>