【问题标题】: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;
}
<h2><span>THIS IS A TEST</span></h2>

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

【问题讨论】:

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

标签: 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改变它。

      【讨论】: