Tumblr主題中的填充問題

所以我設計了一些Tumblr主題的東西，我遇到了一個非常煩人的問題。我編寫了Reblog和Like按鈕，並且Reblog按鈕可以正常工作，但由於某種原因，Like按鈕在底部給出了額外5px的填充。這並不是一個嚴重的問題，但是這對我來說真的很煩人，因爲我找不到擺脫它的方法。我嘗試改變高度，最大高度，定位和所有，並沒有擺脫底部的額外空間。這可能是我的一個愚蠢的錯誤，或者也許它應該是這樣，我沒有意識到它，因爲它太晚了，但任何幫助都會很好。這裏是我的測試博客，其中我設置了主題。如果您查看源代碼，或者將鼠標懸停在Like按鈕上，您可以看到。 http://mchickenposts.tumblr.com/Tumblr主題中的填充問題

編輯：我可以只是延長你的長度，並添加遊標屬性，所以底部5px不會被遺漏。但我想知道我如何完全擺脫它。

這是我的Html代碼的帖子，也是Css。

.post_reblog_like{ 
    list-style-type:none; 
    padding:0px; 
    margin:0px; 
    display:inline-block; 
    float:right; 
} 
.post_reblog_like li{ 
    display:inline-block; 
    opacity:.7; 
} 
.post_reblog_like li:hover{ 
    opacity:1; 
} 
{block:Text} 
       <div class="post_wrapper"> 
        <div class="post_text"> 
         <div class="post_text_body"> 
          {block:Title} 
           <a class="PostTitle" href="{Permalink}">{Title}</a> 
          {/block:Title} 
          {block:NoteCount} 
           <a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a> 
           {/block:NoteCount} 
          <div class="PostBody">{Body}</div> 
         </div> 
          <div class="post_date"> 
           {block:Date} 
            <a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} @ {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a> 
           {/block:Date} 
           <ul onmouseover="changeClass();" class="post_reblog_like"> 
            <li title="Reblog">{ReblogButton color="white" size="20"}</li> 
            <li title="Like">{LikeButton color="white" size="20"}</li> 
           </ul> 
          </div> 
        </div> 
       </div> 
      {/block:Text}

來源

2013-09-27 TiffanyButterfly23

我認爲這個問題與line-height（目前沒有定義）有關。

.like_button { 
    line-height: 0px; 
}

來源

2013-09-27 09:08:39 mikedidthis

我試過了，但它仍然完全一樣.-。感謝您的回答，雖然 – TiffanyButterfly23

今天我有同樣的問題，所以更新了我的答案。 :) – mikedidthis

我再次嘗試過，但它是一樣的。像按鈕的底部向下擴展5px，並且當我將鼠標懸停在該部分上時，它會顯示標題，但是當我將鼠標懸停在實際的心臟圖標上時，它不會顯示它。而且它不會在reblog中這樣做，而且它們的樣式完全一樣。 – TiffanyButterfly23

更改.like_button到display: block，然後float: left。使用display:inline和inline-block的元素總是在底部添加一些字母，如'y'或'g'。希望它能幫助別人！

來源

2015-07-19 17:34:59 pbe

Tumblr主題中的填充問題

回答

相關問題