0

下面的 CSS (SCSS) 清楚地显示了我将高度和宽度定义为 100%。

/*
*       SCSS
*/
a#logo {
     width: 100%;
     height: 100%;
     text-decoration: none;
     span#first-name {
          font-size: 4em;
          color: $gray;
          display: inline;
     }
     span#last-name {
          font-size: 4em;
          color: $yellow;
          display: inline;
     }
}​

/*
*       HTML
*/ 
<a id="logo" href=""><span id="first-name">justin</span><span id="last-name">BEAUDRY</span></a>​

我的问题是“a”元素呈现为“auto”，即使我的 SASS 明确定义高度和宽度为 100%。

解决了

/*
*       SCSS
*/
a#logo {
     width: 100%;
     height: 100%;
     display: block;
     text-decoration: none;
     span#first-name {
          font-size: 4em;
          color: $gray;
          display: inline;
     }
     span#last-name {
          font-size: 4em;
          color: $yellow;
          display: inline;
     }
}​
4

2 回答 2

4

height并且width不适用于未替换的元素display: inline（<a>默认情况下）

于 2012-10-27T08:46:07.143 回答
2

这样做有两个问题：

  • 锚元素 (a) 是一个内联元素，因此如果不将其转换为块元素，就无法为其指定大小。

  • 内联元素 (a) 中有块元素 (div)，它仅在支持 HTML5 的浏览器中有效，并且仅在您实际使用 HTML5 时才有效。

于 2012-10-27T08:47:36.283 回答