CSS需要「格式化」幫助

如果我們看看我的site，我們看到帶有喜歡和不喜歡按鈕的圖標不在其正確的位置。我希望它在文本evaluate tekkkz.com及以上XX total views以上的右側。所以這是我的html：CSS需要「格式化」幫助

<div id="bar"> 
    <span>evaluate<br><a href="../../">tekkkz.com</a></span> 
    <a class="icon-small" id="like"></a> 
    <a class="icon-small" style="margin: 0 0" id="dislike"></a> 
    <br> 
    <span id="views"></span> 
</div>

這裏一些CSS：

.icon-small { 
    display: block; 
    position: absolute; 
    height: 32px; 
    width: 32px; 
    text-indent: -9999em; 
    margin: 0 0.5em; 
} 
#bar span { 
    float: none; 
    padding: 0 0.2em; 
    vertical-align: middle; 
} 
#bar { 
    right: 70px; 
    top: 1em; 
    position: absolute; 
    font-size: 0.7em; 
}

那麼，什麼是錯的？

來源

2015-09-26 Martin Fischer

我重寫了HTML。並非所有更改都是解決您的問題所必需的，但我認爲最好的做法是讓您的元素div與<br />跨度相反。像這樣的硬編碼中斷使得使用CSS控制換行符變得更加複雜。我還發現將一個div中的喜歡/不喜歡的按鈕組合起來更容易。

<div id="bar"> 
    <div class="evaluate">evaluate<br><a href="../../">tekkkz.com</a></div> 
    <div class="likeButtons"> 
     <a class="icon-small" id="like"></a> 
     <a class="icon-small" style="margin: 0 0" id="dislike"></a> 
    </div> 
    <div id="views"></div> 
</div>

然後，對於CSS，我用inline-block將必要的元素並排放置。

.evaluate, .likeButtons { /* this is new */ 
    display: inline-block; 
} 
.icon-small { 
    display: inline-block; /* was block before */ 
    /*position: absolute; <-- remove this */ 
    height: 32px; 
    width: 32px; 
    text-indent: -9999em; 
    margin: 0 0.5em; 
} 
/*#bar span { 
    float: none; 
    padding: 0 0.2em; 
    vertical-align: middle; 
} 
^ I don't think you need this any more, 
maybe the padding but I'm sure you can work that out yourself */ 

#bar { /* didn't touch this */ 
    right: 70px; 
    top: 1em; 
    position: absolute; 
    font-size: 0.7em; 
}

來源

2015-09-26 17:53:05

夢幻般的工作。這麼多時間來解決我的問題，寫了這麼多修復程序！很好！ –

您絕對定位了圖標，但沒有定義它們在父級中的位置（頂部，底部，左側，右側），絕對位置也是這樣。

您可能需要爲它們定義最高值，然後單獨定義左值或右值。

我強烈建議重構html並使用浮動來實現你想要的。使用絕對定位可能是一個痛苦和非常錯誤。

來源

2015-09-26 17:36:16

絕對是必要的因爲它應該是一個小框之間的背景和文本填充的框 –

然後，你將需要使用定位參數來得到你想要的。 –

刪除位置：絕對; 似乎工作

來源

2015-09-26 18:00:08

CSS需要「格式化」幫助

回答

相關問題