Как поместить текст в левую верхнюю границу поля 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: 0px 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>