div标题的边框紧
[英]Tight borders to the div title
问题描述
我想将标题放在边框上div上部分。 以下代码完成了这项工作。
但是，我有许多标题不同的面板。 它们的宽度不同。 我正在寻找一种使标题紧贴边框的方法。
有可能实现吗？
.box{ border: solid 1px #888; padding: 15px 15px; } .box span{ color:red; width:200px; margin: 0 auto; display: block; margin-top:-25px; background-color:white; text-align:center; }
<div class="box"> <span>panel title</span> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
4 个解决方案
解决方案1
3 已采纳 2018-03-07 10:19:26
而不是宽度使用填充，并为跨度提供显示表。
.box span {
display: table;
padding: 0 95px;
}
解决方案2
1 2018-03-07 11:38:29
我对示例有点不满意，但是至少您可能会看到很多有趣的东西
/* the basic reset */ * { box-sizing: border-box; padding: 0; margin: 0; } html { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* any variables */ :root { /* a basic theming (based on AtomOneDark) */ --od-black : #383c44; --od-dark : #5c6370; --od-gray : #818896; --od-light : #abb2bf; --od-white : #f1f8ff; --od-red : #be5046; --od-orange : #d19a66; --od-yellow : #e6c07b; --od-green : #98c379; --od-teal : #56b6c2; --od-blue : #61aeee; --od-purple : #c678dd; --od-fushia : #e06c75; /* the BOX component parameters */ --box-margin: 1.5em 0.5em; --box-padding: 1em; --box-min-width: 14em; --box-inner-padding: 0.75em; --box-border-color: var(--od-black); } /* and that supported by all modern browsers */ /* Main box */ .box{ display: block; margin: var(--box-margin); padding: var(--box-padding); /* calculate the box min width by width of title + padding */ min-width: calc(var(--box-min-width) + ( var(--box-padding) * 2 ) ); color: var(--od-light); background-color: var(--od-black); border-top: solid 2px var(--box-border-color); border-bottom: solid 2px var(--box-border-color); /* adjust the border radius for proportional and beautifull effect */ border-radius: calc( var(--box-padding) / 3 ); } /* Ha ! the box title */ .box header{ /* define simple transition for cool UI */ transition-property: width, border-color; transition-duration: .9s; transition-delay: .3s; transition-timing-function: ease-out; position: relative; display: block; margin: 0 auto; /* placing title at the good pos formulas : -(parent padding + (height/2)) */ margin-top: calc( -1 * ( var(--box-padding) * 2 ) ); width: var(--box-min-width); height: calc( var(--box-padding) * 2 ); line-height: calc( var(--box-padding) * 2 ); text-align:center; text-transform: capitalize; /* a cool background */ background: linear-gradient(to bottom right, var(--od-blue), var(--od-teal)); color: var(--od-white); /* border design */ border-width: 3px; border-style: solid; border-top: none; border-bottom: none; border-left-color: var(--box-border-color); border-right-color: var(--box-border-color); border-radius: var(--box-padding); } /* a small animation indicates to the user that it is reactive and that we are above this element. The cursor is often out of sight for a while, when we are too focused. */ .box:hover header, .box:focus header, .box header:hover { /* on in transition*/ transition-delay: 0s; transition-duration: .3s; transition-timing-function: ease-in; width: calc( var(--box-min-width) + ( var(--box-padding) * 1.75 ) ); border-left-color: transparent; border-right-color: transparent; } /* content and footer */ .box content, .box footer { padding: var(--box-inner-padding); } /* content elements, here, headings title */ .box content h1{ color: var(--od-white)} .box content h2{ color: var(--od-blue)} .box content h3{ color: var(--od-teal)} /* content elements; here, paragraph */ .box content p { padding: var(--box-inner-padding); /* note : indent margin is based on parent padding */ margin: var(--box-inner-padding) calc( var(--box-inner-padding) * 2 ); background-color: var(--od-dark); border-radius: calc( var(--box-inner-padding) / 3 ); }
<!DOCTYPE html> <html> <head> </head> <body> <div class="box"> <header> panel title </header> <content> <h1>Hey ! i'm heading #1</h1> Ok, me, I am normal body text. <p> I'm a simple paragraph ! </p> <h2>Hey ! i'm heading #2</h2> <p> Ho ! Ho ! Me I'm an other paragraph ... </p> <h3>Hey ! i'm heading #3</h3> That heading is crazy rock ! </content> <footer> Well, after all, I AM THE FOOTER HA ! HA ! Haaa ... (-.-) </footer> </div> </body> </html>
解决方案3
0 2018-03-07 10:29:44
您可以执行以下操作：
.wrapper { position:relative; margin:20px; } .title { position:absolute; left: 50%; top:0; transform: translateX(-50%) translateY(-50%); background-color:white; padding:4px 10px; } .box{ border: solid 1px #888; padding: 15px 15px; }
<div class="wrapper"> <div class="title">Panel Title</div> <div class="box"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> </div> <div class="wrapper"> <div class="title">Longer Panel Title</div> <div class="box"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> </div>
解决方案4
0 2018-03-07 10:33:29
应用以下CSS：
.box{
border: solid 1px #888;
padding: 15px;
position:relative;
margin-bottom:25px;
}
.box span {
color:red;
display: block;
padding:0 20px;
top:-5px;
background-color:white;
text-align:center;
position:absolute;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
紧密围绕图像的div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.