程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> w3c-樣式錯位,不知什麼原因?

w3c-樣式錯位,不知什麼原因?

編輯:編程解疑
樣式錯位,不知什麼原因?
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .strap {
        font-size: 0;
    }

    .strap>* {
        display: inline-block;
    }

    .footer-content {
        height: 254px;
    }

    .footer-narrow_wrapper {
        width: 112px;
        height: 253px;
    }

    .footer-wide_wrapper {
        width: 357px;
        height: 253px;
    }

    .footer-qrcode_wrapper {
        width: 232px;
        height: 253px;
    }

    .footer-square {
        width: 110px;
        height: 110px;
        line-height: 110px;
        border: 1px solid black;
        font-size: 13px;
        color: rgb(128, 128, 128);
        text-align: center;
    }

    .footer-rectangle {
        width: 355px;
        height: 107px;
        border: 1px solid black;
        line-height: 110px;
        text-align: center;
        font-size: 18px;
        color: rgb(128, 128, 128);
    }

    .footer-qrcode {
        width: 230px;
        height: 230px;
        border: 1px solid black;
        font-size: 12px;
        color: rgb(51, 51, 51);
    }
    </style>
</head>

<body>
    <div class="footer-content content strap">
        <div class="footer-narrow_wrapper">
            <div class="footer-square">關於我們</div>
            <div class="footer-square">服務條款</div>
        </div>
        <div class="footer-narrow_wrapper">
            <div class="footer-square">隱私政策</div>
            <div class="footer-square">幫助中心</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">4000-987-805</div>
            <div class="footer-rectangle">[email protected]</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">3041507598</div>
            <div class="footer-rectangle">@人人碼官方微博</div>
        </div>
        <div class="footer-qrcode_wrapper">
            <div class="footer-qrcode"></div>
        </div>
    </div>
</body>

</html>

元素的頂部不能對齊,搞不清楚是什麼原因,誰能講解下

最佳回答:


 .strap>*{
    display: inline-block;
    vertical-align:top;/*加上這個*/
}
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved