爲什麼一個鏈接樣式看起來像一個按鈕延伸很寬？

我有看起來像按鈕鏈接此示例頁面：http://www.problemio.com/problems/problem.php?problem_id=251 爲什麼一個鏈接樣式看起來像一個按鈕延伸很寬？

大多數鏈接按鈕其實看起來不錯，但是，說：「提出一個解決方案」的一個非常廣。

它的樣式是這樣的：

a:link.image_button 
{ 
    display: block; 
    background: #4E9CAF; 
    padding: 10px; 
    text-align: center; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
} 

a:visited.image_button 
{ 
    display: block; 
    background: #4E9CAF; 
    padding: 10px; 
    text-align: center; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
}

和類型的有趣的事情是，如果你按下這個按鈕，然後按「查看現有更改」按鈕，它帶回原來的按鈕看起來像它原本是爲了。

下面是HTML它：

<div id="solution_suggestions_title"> 

       <center><a class="image_button" id="add_existing_suggestion" href="#" title="Click to add your ideas for solving this issue!">Suggest a Solution</a> </center>   

       <center><a class="image_button" style="display: none;" id="show_existing_suggestions" href="#">See Existing Suggestions</a></center> 
      </div>

來源

2012-01-04 GeekedOut

單擊它並返回後，它將獲得一種顯示樣式：添加了內聯。這就是它改變的原因。如果你使用firefox下載一個名爲firebug的插件，它可以幫助你解決CSS問題 – Samjus 2012-01-04 15:55:35

或者使用Chrome內置的開發者工具（F12），或者甚至IE最近也有它（也是F12）。雖然如果我建議使用IE，我會是一個壞人:) – PeeHaa 2012-01-04 16:02:54

這是廣泛的，因爲它有財產：display: block;。

如果一個元素有display: block;它默認默認使用父容器的整個寬度（除非另有定義）。

P.S.我不認爲它看起來很糟糕：P

來源

2012-01-04 15:50:24 PeeHaa

試試'display：inline-block;' – 2012-01-04 15:54:42

因爲display: block元素擴展，以滿足他們的水平空間。

來源

2012-01-04 15:49:12 tkone

爲什麼一個鏈接樣式看起來像一個按鈕延伸很寬？

回答

相關問題