1

我有这个 div，我正在尝试像这样应用 line-height ......

.social {
    background-color: #FFFFFF;
    float: left;
    font-size: 18px;
    height: 93px;
    line-height: 60px;
    padding-left: 20px;
    width: 190px;
}

但是.social课程不会关闭，div里面的任何东西都保持在顶部......这是html ..

<div class="social">
     <ul>
          <li class="facebook">
               <a href="http://www.facebook.com/SurfTheCurve" target="_blank"></a>
          </li>
          <li class="twitter">
               <a href="https://twitter.com/SurfCurveTutor" target="_blank"></a>
          </li>
          <li class="email">
               <a href="mailto:info@surfthecurve.ca?subject=Website Enquiry" target="_blank"></a>
          </li>
     </ul>
</div>

这是其他一些 CSS

.social ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}

.social li {
    float: left;
}

.social ul .facebook a {
    background-image: url("images/facebook.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    text-decoration: none;
    width: 35px;
}

.social ul .twitter a {
    background-image: url("images/twitter.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

.social ul .email a {
    background-image: url("images/email.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

希望这可以帮助

4

1 回答 1

5

line-height需要文本（否则没有行！）但是您提供的 HTML 没有任何文本，它只是空<a>元素。

我在这里做了一个jsFiddle：http: //jsfiddle.net/7vcmC/（我不得不改变颜色设置）但我想这就是你想要的效果？

于 2012-09-30T01:12:10.780 回答