爲什麼不能添加黑線下劃線字符？

-1

我想在某些字符上添加黑色線條，黑色線條是背景照片。
請以line.gif格式下載文件，並將以下css代碼作爲名稱insert_line.html保存到與line.gif相同的目錄中。爲什麼不能添加黑線下劃線字符？

body{ 
 
width:1000px; 
 
margin:0 auto;} 
 

 

 
.prod_list_title_bar{ 
 
width:1000px; 
 
height:40px; 
 
float:left; 
 
line-height:18px; 
 
font-size:15px; 
 
color:#565656; 
 
background: url(../line.gif) no-repeat center; }

<div id="container"> 
 
<div id="prod_list"> 
 
    <div class="prod_list_title_bar">books</div> 
 
</div> 
 
</div>

我要的是下面的。我用我的css代碼得到的是以下內容。爲什麼我的css代碼不能添加line.gif加下劃線字符books？

來源

2016-03-02 it_is_a_literature

我們不下載files..it你的工作就是創建演示的是* *包括**他們爲什麼不只是使用邊界？ –

爲什麼當它看起來只是一個下劃線或下邊框時，你會說「一些字符上的黑線」？ – j08691

我可以問一下你的線路有什麼特別的地方，你不能通過CSS創建它，並且至少減少服務器調用1 – markoffden

添加一行到CSS的東西，只要給它一個邊界：

.prod_list_title_bar { 
    border-bottom:1px solid #cccccc; 
    padding-bottom:5px; /*This is to set the distance from the words*/ 
    margin-bottom:10px; /*This is to set the distance to the top of the next line*/ 
}

https://jsfiddle.net/92L4pctg/1/

還包括在那個例子是「上添加一些字符的黑線」，而如果我正確閱讀意味着你想要在某個單詞下面放置該行？

由於您確實在詢問將圖片放在您的字詞下，因此發生了什麼。

您的文字容器不夠大，無法看到圖像的底部。你可以增加你的line-height看到圖像的底部，或使用background-position:bottom;

.prod_list_title_bar { 
    background-image: url('http://i.stack.imgur.com/LSc6d.gif'); 
    background-position: bottom; 
    padding-bottom: 5px; 
}

更新小提琴顯示此：https://jsfiddle.net/92L4pctg/3/

來源

2016-03-02 14:29:30 ntgCleaner

我知道設置'border-bottom：1px solid'的方法，但爲什麼我的css代碼可以不要把line.gif加下劃線「books」？ –

@it_is_a_literature，我已更新上面的代碼以適應您的圖像。你的單詞的高度可能不夠高，不足以使它的容器足夠高，看不到你的線條的底部。 – ntgCleaner

ntgcleaner，太棒了。 –

爲什麼不能添加黑線下劃線字符？

回答

相關問題