<LI> 订单显示不正确

Question

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

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

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

这是 header 中的代码：

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

然后 header 中的这个限定符：

<?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

是因为这条规则

#social-icons li {float:right;}

向右浮动会颠倒元素的顺序（在您的例子中是所有 li 元素）

Answer 2

使用text-align:right;instead of float:right;

如下所述，是因为元素的浮动。第一个 li 元素会先向右浮动，其余的元素也跟着向右浮动，这就是它们给人的印象是 "reversed".

<LI> 订单显示不正确

<LI> order not displaying correctly

html

css

html-lists