行和文本之间的更多空间答案

【问题标题】：more space between lines and Text行和文本之间的更多空间
【发布时间】：2018-07-04 16:28:42
【问题描述】：

我正在尝试做这样的事情：

      ---------------------        WORK         ------------------
                           ---------------------

这是我的代码

h2 { 
    width:100%;
    text-align:center;
    border-bottom: 1px solid #000;
    line-height:0.1em;
    margin:10px 0 20px; 
} 
h2 span { 
    background:#fff; 
    padding:0 10px;
}

&lt;h2&gt;&lt;span&gt;THIS IS A TEST&lt;/span&gt;&lt;/h2&gt;

我尝试了很多更改，但不能。请让我知道该怎么做？

【问题讨论】：

我不能说出你真正在问什么，但如果你想要的输出是上面的文本，那么试试这个：`
```
------------- -------- 工作 ------ ---------前>`
```

标签： html css

【解决方案1】：

HTML 代码：

<div class='white-line'></div>
    <div  class='line-title text-center' >
    <span class='bg-black'>THIS IS A TEST</span>
</div>

CSS 代码：

.white-line{ height: 0; border-top: 1px;}
.bg-black{ background-color: #000000; }

【讨论】：

【解决方案2】：

也许，您正在寻找的是虚线边框：border-bottom: 1px dashed black。

h2 {
  width: 100%;
  text-align: center;
  border-bottom: 1px dashed #000;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #fff;
  padding: 0 40px;
  border-bottom: 1px dashed black;
}

&lt;h2&gt;&lt;span&gt;WORK&lt;/span&gt;&lt;/h2&gt;

【讨论】：

【解决方案3】：

你应该尝试这样的事情：

    h2 { 
        width:100%;
        text-align:center;
        border-bottom: 1px solid #000;
        line-height:0.1em;
        margin:10px 0 20px; 
    } 
    h2 span { 
        background:#fff; 
        padding:0 10px;
        border: 1px solid #000;
        border-top-width: 0;
        border-left-width: 0;
        border-right-width: 0;
    }

    &lt;h2&gt;&lt;span&gt;THIS IS A TEST&lt;/span&gt;&lt;/h2&gt;

这个例子是solid边框，如果你想要虚线边框，你可以用dashed改变它。

【讨论】：