Question

我想把我的标题放在边框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>

Answer 1

而不是宽度使用填充并为span提供显示表。

.box span {
    display: table;
    padding: 0 95px;
}

Answer 2

我对这个例子有点不屑一顾，但至少你可能会看到很多有趣的东西

Private Sub CommandButton5_Click()
Dim ws As Worksheet
Dim dictUnq As Object
Dim UnqList() As String
Dim aData As Variant
Dim vData As Variant
Dim pData As Variant
Dim i As Variant
Dim PrintString1() As String
i = 1

Set ws = ActiveWorkbook.Sheets("Sheet3")
Set dictUnq = CreateObject("Scripting.Dictionary")

Application.ScreenUpdating = False
Application.EnableEvents = False

With ws.Range("G2", ws.Cells(ws.Rows.Count, "G").End(xlUp))
    If .Row < 2 Then Exit Sub   'No data
    If .Cells.Count = 1 Then
        ReDim aData(1 To 1, 1 To 1)
        aData(1, 1) = .Value
    Else
        aData = .Value
    End If
End With

SBI_Omschrijving.ListBox1.Clear

For Each vData In aData
    If Len(vData) > 0 Then
        If Not dictUnq.exists(vData) Then dictUnq.Add vData, vData
    End If
Next vData

Debug.Print dictUnq(vData)

SBI_Omschrijving.ListBox1.List = dictUnq.keys
MsgBox "Unique findings:  " & dictUnq.Count


Application.ScreenUpdating = True
Application.EnableEvents = True

/* 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 );
}

Answer 3

你可以这样做：

.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>

Answer 4

应用以下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标题的边界很紧

4 个答案: