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