需要刪除文字上的邊框

-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

需要刪除文字上的邊框

回答

相關問題