Question

我有这个div，我试图像这样应用行高......

.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;
}

希望这有帮助

Answer 1

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

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

CSS line-height无法正常工作

1 个答案: