边框绘制就像标题下划线一样

Question

我使用以下代码片段绘制边框

 <div style="height: 250px;width: 300px;border: 1px solid #99999A;">
        <div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
            Title
        </div>
    </div>

我创建了小提琴来解释我的工作场景来自以下链接

Click here

从此我得到了如下屏幕截图：

屏幕截图：

如何通过更改内部div的边框底部样式来修改它以获得输出，如下面的屏幕截图

屏幕截图：

Answer 1

检查一下。 Working Fiddle

<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a; width:90%; margin:0 auto;">Title</div>
</div>

Answer 2

不使用填充，而是使用内部div的余量。小提琴http://jsfiddle.net/sajith/DZNbP/

<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
        <div style="margin: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
            Title
        </div>
    </div>

Answer 3

* 用于此鳕鱼 * e

<强> HTML

 <div class="main">
        <div class="conmain">
            <h1>Title</h1>
        </div>
    </div>

<强>的CSS

.main{
    height: 250px;width: 300px;border: 1px solid #99999A;

}
.conmain{ 
    padding: 0.7em 0.4em 0.2em 0.4em;
}
.conmain h1{border-bottom:1px solid #99999a; line-height:30px;margin:0; font-size:12px;}

<强> Demo