html - 订单显示不正确

Question

我有一个网站在列表中显示 3 个社交图​​标。标题中有一些代码可以更改这些社交图标在主页以外的任何其他页面上的位置。出于某种原因，社交图标在主页上的顺序与其他页面上的顺序不同。

我想要的顺序是 Facebook、Twitter、Instagram..

知道为什么顺序会改变吗？

这是标题中的代码:

 </div><div id="social-container"><ul id="social-icons">
 <li><a href="http://www.facebook.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/facebook.png" border="0" height="50px" width="50px"></a> </li>
<li><a href="http://www.twitter.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/twitter.png" border="0" height="50px" width="50px"></a> </li>
 <li><a href="http://www.instagram.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/instagram.png" border="0" height="50px" width="50px"></a></li>
 </ul>

CSS:

#social-container {
    height:100%;
    z-index:-100;
}

#social-icons {
    position:absolute;
    bottom:30px;
}


#social-icons li {
    float:left;
    display: inline;
    list-style-type:none; 
    padding: 10px 10px 10px 10px;
    bottom:0;
    text-decoration: none;
}

然后是标题中的这个限定符:

<?php if ( is_home() ) { ?>
 <style type="text/css">
    #social-icons li {float:right; display: inline;list-style-type:none; padding: 10px 10px 10px 10px; width:50px;height:50px;text-decoration: none;}
    #social-icons {width:100%; position:absolute;top:35px;}
}

    </style>
<?php } ?>

Answer 1

使用text-align:right; 代替float:right;

下面说了，是因为元素的 float 。第一个 li 元素会先向右浮动，其余元素也跟着向右浮动，这就给人一种“颠倒”的感觉。