html - 使 CSS 渐变扩展到 block ？

Question

我正在尝试(某种程度上)复制该主题最顶部菜单栏的外观:http://elegantthemes.com/preview/Lucid/

我正在努力解决的部分是让我借用的梯度占据<li>的整个“ block ”。元素占据。由于这在概念上有点难以解释，这是我目前拥有的:http://jsfiddle.net/tCH39/

作为引用，以下是 HTML 和 CSS 的相关部分:

  <div id="top-menu">
    <ul>
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
    </ul>
  </div>

CSS:

body { /* CSS Reset - http://meyerweb.com/eric/tools/css/reset/ */
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent; 
}

ol, ul { list-style: none; }
li {
  display: inline;
  padding-left: 30px;
  padding-right: 30px;
}

a { 
  text-decoration: none;
  color: black;
}

#top-menu {
  position: relative;
  /*display: block;*/
  background-color: #f9f9f9;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 60px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#top-menu a {
  text-shadow: 1px 1px 0 #fff;
  color: #4b4b4b;
  width: auto;
  height: 100%;
  display: inline-block;
}

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }
#top-menu li.sfHover > a { color: #fff; text-shadow: none; }

为什么渐变仅限于文本，而不是包含填充、边距等的整个区域？

提前致谢。

Answer 1

首先，您在 a

上设置了渐变

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

这应该在 li 上。

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li:hover  { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

然后我增加了 li 的高度。

LI 示例:http://jsfiddle.net/tCH39/1/

如果你想为 a 本身设置样式。

这样做:

ol, ul { list-style: none; padding: 0; margin:0; }


a { 
    text-decoration: none;
    color: black;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

显示 a 示例的 fiddle :http://jsfiddle.net/tCH39/7/

在我的书中，这是一种更简洁的方法，因为 a 是您想要设置样式并且“全部”可点击的元素。