我使用以下代码片段绘制边框
<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>
我创建了小提琴来解释我的工作场景来自以下链接
从此我得到了如下屏幕截图:
屏幕截图:
如何通过更改内部div的边框底部样式来修改它以获得输出,如下面的屏幕截图
屏幕截图:
答案 0 :(得分:4)
检查一下。 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>
答案 1 :(得分:0)
不使用填充,而是使用内部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>
答案 2 :(得分:0)
* 用于此鳕鱼 * 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 强>