为什么看起来像按钮的链接样式扩展得非常宽？

Question

我有一个示例页面,其中的链接看起来像按钮:http://www.problemio.com/problems/problem.php？ probable_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>

Answer 1

这是因为它具有以下特性:display: block;.

如果元素具有display: block;它,则默认情况下总是占用父容器的整个宽度(除非另外定义).

PS我不认为它看起来很糟糕:P