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

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

下面是它在管理模式下的外观示例。https://i.stack.imgur.com/F3FMH.jpg这是加载时的样子。https://i.stack.imgur.com/qaPrS.jpg加载后，它看起来就像第一个图像一样。

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