Question

这是一个例子。

div class="learn"的链接宽度为1014像素。虽然按钮只有215px宽。

我做错了什么？

    .inside {
        width: 1014px;
        margin: 0 auto;
      overflow: hidden;
    }

    #people .learn {
      display: block;
      background: url(http://www.domain.com/images/learn.png);
      width: 215px; height: 51px;
      margin: 30px 0 0 20px; padding: 0;
    }

  <div id="people">
    <div class="inside">
      <div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>

      <!-- PROBLEM HERE -->

      <a href="#"><div class="learn"></div></a>

      <!-- PROBLEM HERE -->

    </div>
  </div>

Answer 1

带有学习类的div正在显示一个块，因此浏览器将调整外部<a>和显示块，并占用可用的宽度。

将div显示更改为内联块，然后您可以看到<a>的宽度为215px

这是示例代码

<html> 
<style> 
  .inside {
        width: 1014px;
        margin: 0 auto;
      overflow: hidden;
    }

    #people .learn {
           display: inline-block;

      background: url(http://www.domain.com/images/learn.png);
      width: 215px; height: 51px;
      margin: 30px 0 0 20px; padding: 0;
      border:solid 1px ;
    }
 </style>
  <div id="people">
    <div class="inside">
      <div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>

      <!-- PROBLEM HERE -->

      <a href="#" style="border:solid 1px red"><div class="learn">wwww</div>fddfg</a>

      <!-- PROBLEM HERE -->

    </div>
  </div>
  </html>

Answer 2

在HTML4中，your markup is not Valid：DIV elements MUST NOT be descendent elements of A elements there。仅in HTML5 this is Valid。此时，您不应该依赖布局引擎支持的HTML5。

div个元素是block-level个元素（每个用户代理样式表，默认为display: block）;除了进一步的CSS声明外，它们与containing block一样宽。

此处的包含块由祖先div元素提供，该元素具有指定的CSS类inside（class="inside"）。对于具有该类的元素（.inside - 有一个CSS规则，在您的样式表中说明这些元素应该有width: 1014px。因此，后代div元素显示为与祖先div元素1014px一样宽。

a个元素是内联级元素（每个用户代理样式表，默认为display: inline）;除非进一步声明，否则它们具有其内容的组合维度。此a元素的唯一内容是div元素。因此，父a元素 - 链接 - 与子div元素（实际上并不属于那个元素）一样宽。

元素does not automatically stretch的background-image到元素框的尺寸，这可能会导致您对该背景图像所代表的“按钮”造成混淆。

一个href链接比它们应该更宽

2 个答案: