如何在div的左上角邊框內放置文本

Question

我已經閱讀了很多有關在div的邊框上放置標簽/圖例/文本的文章。 我在很多div處都想顯示不同的標簽，如下圖所示：

正如我在w3school中看到的那樣，他們說要設置一個字段並獲取聲明圖例以顯示文本，但對我而言不起作用。 我有一組jquery代碼，將html附加標簽：

 $('.menu').hover(function () { $(this).css('border', 'solid 2px #8080ff'); $(this).find('.divlabel').show(); }, function () { $(this).css('border', 'none'); $(this).find('.divlabel').hide(); }); 

 .divlabel { float: left; top: 5px; right: 10px; padding: 0px; background: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <div class="divlabel">Menu</div> <ul class="mainmenu"> <li>...</li> <li>...</li> </ul> </div> <div> 

它無法正常工作，請使用此CSS幫幫忙。

Answer 1

下面的示例可以幫助您入門。 僅CSS解決方案

 div.wrapper { position: relative; border: 2px solid cornflowerblue; margin-top: 20px; padding: 20px 10px 10px; } div.wrapper label { color: white; line-height: 20px; padding: 0 5px; position: absolute; background-color: cornflowerblue; /* Adjust these values to posiytion the title or label */ top: -10px; left: 10px; } 

 <div class="wrapper"> <label>Menu 1</label> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna </div> </div> <div class="wrapper"> <label>Menu 2</label> <div> Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </div> </div> <div class="wrapper"> <label>Menu 3</label> <div></div> </div> <div class="wrapper"> <label>Menu 4</label> <div></div> </div> <div class="wrapper"> <label>Menu 5</label> <div></div> </div> <div class="wrapper"> <label>Menu 6</label> <div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div> </div> 

Answer 2

您可以使用HTML5 data-*屬性來實現此目的。 它將保存一個div元素：

 body { font: 14px/20px Arial, sans-serif; } .menu { position: relative; border: 3px solid #8fdaf9; padding: 30px 10px; } .menu:before { content: attr(data-title); background: #8fdaf9; position: absolute; padding: 0 20px; color: #fff; left: 0; top: 0; } .menu ul { margin: 0; } 

 <div class="menu" data-title="Menu"> <ul class="mainmenu"> <li>Menu Item 1</li> <li>Menu Item 2</li> </ul> </div> <div>