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

这是由于这条规则

#social-icons li {float:right;}

浮动右侧反转元素的顺序（在您的情况下是所有li元素）

Answer 2

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

如下所述，这是因为元素的浮动。第一个li元素将首先浮动到右边，其余元素跟随，这就是给人的印象是它们已经被反转了＃34;

<li>订单无法正确显示</li>

2 个答案: