如何在div的边框角落显示文字？

Question

我想在html页面中显示如下文字，如何做到这一点？

这就是我现在所做的。

<div class="filterleft" style="display: inline-block;">
  <div id="filterleft_border" style="border-style:solid; border-width:1px;" >   
   <label class="category-label" for="category">Filter: </label>
   <input type="checkbox" id="enableFilter"/>
   <input type="search" id="filterValue" style="width: 50px"/>
  </div> 
</div>

我为此创造了一个小提琴，

http://jsfiddle.net/KendoDev/kzf6257h/

但我想要的是，

Answer 1

您必须使用HTML <fieldset>和<legend>来完成这项工作。使用起来非常简单。在W3Schools

中查看更多相关内容

参见

fiddle

HTML

<div class="filterleft" style="display: inline-block;"> 
   <fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
      <legend>Filter: </legend>
      <input type="checkbox" id="enableFilter"/>
      <input type="search" id="duration" style="width: 50px"/>
   </fieldset>
</div>

Answer 2

如果您不想使用fieldset，请使用如下所示。

.category-label
{
 position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}

DEMO

Answer 3

如果您希望它特别是您可以做的传奇标签：

http://jsfiddle.net/ahallicks/kzf6257h/5/

#filterleft_border {
    padding: 10px;
    position: relative;
}
.category-label {
    background: #FFF;
    left: 5px;
    position: absolute;
    top: -10px;
}

请注意，相对定位会使标签保持在您需要多次使用它的cae的边界范围内。

Answer 4

它是一个字段集。我试着改变你的代码。看看吧。

  <div class="filterleft" style="display: inline-block;">
  <fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >   
   <legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
   <input type="checkbox" id="enableFilter"/>
   <input type="search" id="duration" style="width: 150px"/>
  </fieldset> 
</div>

以下是W3schools

中的文件