1

私はこの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;
}

お役に立てれば

4

1 に答える 1

5

line-heightにはテキストが必要ですが (それ以外の場合は行がありません!)、提供した HTML にはテキストがなく、すべて空の<a>要素です。

ここでjsFiddleを作成しました：http://jsfiddle.net/7vcmC/（色の設定を変更する必要がありました）が、それがあなたが求めている効果だと思いますか？

于 2012-09-30T01:12:10.780 に答える