Question

我有一个示例页面，其中的链接看起来像按钮：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>

Answer 1

它很宽，因为它具有属性：display: block;。

如果元素具有display: block;，则默认情况下它总是占用父容器的整个宽度（除非另有定义）。

P.S。我不认为它看起来很糟糕：P

Answer 2

因为display: block元素展开以适合它们的水平空间。

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

2 个答案: