-1

这是一个例子。

的链接div class="learn"是 1014px 宽。虽然按钮只有 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>
4

2 回答 2

2

具有学习类的 div 具有块显示，因此浏览器会将外部调整<a> 为显示块并占据可用宽度。

将 div 显示更改为 inline-block 然后您可以看到宽度<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>
于 2013-06-08T12:10:12.210 回答
1

在 HTML4 中，您的标记无效：DIV元素不得是那里A元素的后代元素。只有在 HTML5 中这是 Valid。此时，您不应依赖布局引擎支持的 HTML5。

div元素是块级元素（每个用户代理样式表，它们的默认值为display: block）；除非有进一步的 CSS 声明，否则它们与包含块一样宽。

此处的包含块由指定了 CSS 类 ( )的祖先div元素提供。具有该类的元素有一条 CSS 规则——在你的样式表中，这些元素应该有. 因此后代元素显示为与祖先元素一样宽。insideclass="inside".insidewidth: 1014pxdivdiv1014px

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

background-image元素的不会自动拉伸到元素框的尺寸，这可能会导致您对该背景图像所代表的“按钮”感到困惑。

于 2013-06-08T12:18:05.087 回答