表示ブロックのラベルにテキストを含めることはできません

Question

私はテスト用の写真のコレクションを作成しています。画像を含むフレームのラベルと、テキストを含み、半透明の黄色の背景色を有する別のラベルが表示される。

残念ながら、黄色のラベルにはテキストを含めることはできません。私はこの問題がdisplay: blockスタイルのために発生したと信じています。

テキスト、オーバーフロー-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

絶対配置を使用して、2番目のラベルを最初のラベルの上に配置する必要があります。

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