字體未顯示在容器的底部？

這是我的HTML代碼，用於在小容器中顯示帶有背景的字體。。字體未顯示在容器的底部？

這裏是CSS

.cons_save h4{font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}

IM不能夠把它！在容器底部的任何其他內容在它上面的容器保持

我的HTML代碼

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">  
<span class="cons_save fl clr"> 
    <h4><?php echo $save. " %"; ?> </h4> 
</span> 
</div>

來源

2012-02-29 Beginner

哪裏的HTML？ – Joseph 2012-02-29 08:22:32

您的HTML代碼丟失 - 請提供HTML代碼（也許您的問題的一個小例子在線？） – Zeta 2012-02-29 08:22:42

您的HTML在哪裏？看起來你忘了發佈它。 – 2012-02-29 08:22:42

首先，我會單獨寫CSS的每個屬性如下：

.cons_save h4 { 
    font-weight: bold; 
    font-size: 22px/60px; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 20px 0px -15px 20px; 
    color: #f78d1d; 
    vertical-align: bottom; 
    background: url(../images/save_bg_cons.png) no-repeat; 
    width: 151px; 
    height: 69px; 
    }

然後，看起來類名稱與span標籤中的名稱不匹配。

你應該實際嘗試，並在標題標籤本身設置的類名。

來源

2012-02-29 08:34:04 utsikko

不！ :(這不是 – Beginner 2012-02-29 08:45:46

不要把heading標籤內部spans

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">  
    <div class="cons_save fl clr"> 
     <h4><?php echo $save. " %"; ?> </h4> 
    </div> 
</div>

而且還具有標題默認情況下，大量的保證金&填充。所以可能是進入谷底的原因。一定要清除它

.cons_save h4 { margin: 0;padding:0; }

它工作時無需復位過，檢查here

來源

2012-02-29 08:45:23 Starx

不知道是什麼問題，如果你能使用sepcify然後http://jsfiddle.net/這將是很好。

無論如何，我建議你改變span到div，像這樣：

<div id ="<?php echo $store->branch_id;?>Collect" style="display:block">  
<div class="cons_save fl clr"> 
    <h4><?php echo $save. " %"; ?> </h4> 
</div> 
</div>

而且，你有vertical-align這是行不通的，除非你添加到你的CSS display: table-cell [注：這不會在IE7工作]：

.cons_save h4{display: table-cell;font:bold 22px/60px Arial,Helvetica, sans-serif;margin:20px 0px -15px 20px; color:#f78d1d;vertical-align: bottom; background:url(../images/save_bg_cons.png) no-repeat; width:151px; height:69px;}

來源

2012-02-29 08:50:58 mkk

我不建議你使用的塊級元素屬性（vertical-align）。並且不要將heading放在span之內。不改變HTML我這樣做：

#Collect{ 
    border: 1px solid #ccc; 
    width: 151px; 
    height: 69px; 
} 

h4{ 
    font-weight: bold; 
    font-size: 22px/60px; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0; 
    color: #f78d1d; 
    background: url(../images/save_bg_cons.png) no-repeat; 
    background:#eee; 
    position: absolute; 
    bottom: 0; 
}

你甚至可以擺脫span的。

來源

2012-02-29 09:08:54 Maroshii

字體未顯示在容器的底部？

回答

相關問題