Question

我的网站右侧有一个社交图标块，当网站加载时你可以看到图标出现在左上方，但是一旦网站加载，它们会移动到正确的位置。它会使页面看起来相当愚蠢，即使只发生了一两秒。无论如何要做到这一点，社交图标块加载在右上角？

HTML

<div id="socialicons">
<a href=""><img src="" alt="RSS" /></a>
<a href=""><img src="" alt="Tumblrr" /></a>
<a href=""><img src="" alt="Pinterest" /></a>
<a href=""><img src="" alt="Google+" /></a>
<a href=""><img src="" alt="Facebook" /></a>
<a href=""><img src="" alt="Twitter" /></a>
</div>

CSS

#socialicons {
    padding-right: 150px;
}

#socialicons img {
    float: right;
    padding-top: 3px;
    display: block;
}

以下是管理模式下的示例。 http://imgur.com/5TxDbd4 这是加载时的样子。 http://imgur.com/KxCLyMM 加载后，它看起来就像第一张图片。

Answer 1

试试这个：

HTML

<div id="nav">

   <ul id="nav-items">
         <li>Home</li>
         <li>About</li>
         <li>etc...</li>
   </ul><!-- this ul will hold the menu options -->

   <div id="socialicons">
     <a href=""><img src="" alt="RSS" /></a>
     <a href=""><img src="" alt="Tumblrr" /></a>
     <a href=""><img src="" alt="Pinterest" /></a>
     <a href=""><img src="" alt="Google+" /></a>
     <a href=""><img src="" alt="Facebook" /></a>
     <a href=""><img src="" alt="Twitter" /></a>
   </div><!-- this is your social icons wrapper -->

</div><!-- this div will hold both menu options and socialicons -->

CSS

#nav{
    width:1024px; /* fixed width */
    margin:auto;  /* this div will be centered */
}

#navitems{
    float:left; /* this block contains the menu and it will float to the left */
}

#navitems li{
    display:inline-block;
    list-style:none;
    margin:0;
    padding:2px; /* depending on how much space do you want between items */
    text-align: center; /* the text will be centered inside each list element. */
}

#socialicons{
    float:right; /* this block will float right */
}
#socialicons img {
    display:inline-block; /* use it instead "float:right" */
    padding-top: 3px;
    display: block;
}

加载时，社交图标显示在屏幕的左上角

1 个答案: