需要删除文字上的边框

-1

我有这个jsfiddle，显示我目前的代码，但它并没有为我服务。我想删除只觉我的文字需要删除文字上的边框

需要有像一些-------- -------文字

还需要整个边框顶部，底部，左侧边框右侧和背景颜色黄色应该保持不变，我知道应用边框白色会做到这一点，但我不想为文本显示白色背景。

<div class="row"> 
     <div class="col-sm-8 col-sm-offset-2"> 
      <div class="testing"> 
       <ul> 
        <li> 
         <label for="name">Some text but the border cuts it</label> 
        </li> 
       </ul> 
      </form> 
     </div> 
    </div> 





.testing{ 
    margin:50px auto; 
    background:transparent; 
    border-radius:4px; 
    padding:10px; 
} 

.testing li{ 
    display: block; 
    padding: 10px; 
    border:1px solid #000000; 
    margin-bottom: 0px; 
    border-radius: 4px; 

} 
.testing li > label{ 
    display: block; 
    text-align: center; 
    margin-top: -20px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 40%; 
    color: green; 
    background-color: transparent; 
    font-size: 14px; 

}

来源

2015-05-03 Sana

您可以尝试删除该行：边距：-20px ;.希望它会有所帮助。 –

为什么'margin-top：-20px;'？ – undefined

如果没有这个边距，文本就会在li标签内部对齐......我希望它向上移动 – Sana

什么你正在尝试做的可以通过使用fieldset和legend元素可以轻松实现：

<div class="testing"> 
    <fieldset> 
    <legend>Some text but the border cuts it</legend> 
    </fieldset> 
</div>

Here is a deme.

来源

2015-05-03 06:36:26 undefined

我知道有没有简单的方法来做到这一点。但您可以使用fieldset html标记。见here

来源

2015-05-03 05:16:52

对不起Vikash，Vohuman先回答了这个问题，但我可以给你一个upvote。 – Sana

这个怎么样的解决方案？使用伪类并定位它以覆盖该行？

http://jsfiddle.net/kidkie/1yb6jt1k/4/

body { 
 
    background-color : yellow; 
 
} 
 
.testing{ 
 
    margin:50px auto; 
 
    background:transparent; 
 
    border-radius:4px; 
 
    padding:10px; 
 
} 
 

 
.testing li{ 
 
    display: block; 
 
    padding: 10px; 
 
    border:1px solid #000000; 
 
    margin-bottom: 0px; 
 
    border-radius: 4px; 
 

 
} 
 
.testing li > label{ 
 
    display: block; 
 
    text-align: center; 
 
    margin-top: -20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 40%; 
 
    color: green; 
 
    background-color: transparent; 
 
    font-size: 14px; 
 
    position: relative; 
 
} 
 

 
.testing li > label span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.testing li > label:before { 
 
    content: ""; 
 
    background: yellow; 
 
    height: 1px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    z-index: 1; 
 
}

<div class="row"> 
 
     <div class="col-sm-8 col-sm-offset-2"> 
 
      <div class="testing"> 
 
       <ul> 
 
        <li> 
 
        <label for="name"><span>Some text but the border cuts it</span></label> 
 
        </li> 
 
       </ul> 
 
      </form> 
 
     </div> 
 
    </div>

来源

2017-04-20 07:30:24 Kidkie

需要删除文字上的边框

回答

相关问题