0

我的页面上有两个li元素，我希望它们将一个显示在另一个之上，但它们没有。这是我的代码：

#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
 }
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}

.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}

使用这个 CSS 的 HTML 是：

<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow"          share_url="http://www.mysite.com"></a> 
 </li>

<li>
<a href="https://twitter.com/share" rel="nofollow" class="twitter-share-button" data- url="http://www.mysite.com" data-lang="en" data-count="vertical">Tweet</a>
</li>

 </ul>

Facebook like 按钮要么出现在 twitter 推文按钮的顶部，要么出现在它的右侧。由于某种原因，它每次都不同。

4

1 回答 1

0

当我在这里@ csstest.com测试您的代码时，这两个li很好地显示在另一个之上，就像普通li元素一样。

而且我在您的 css 中看不到任何可能影响元素样式的 li 内容。

除了你给我们的css风格之外，没有其他的css风格了吗？

您使用什么浏览器进行测试？

编辑1：

如果你这样做：

#floating-box 
{
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social li
{
list-style-type : none;
}

应用于：

<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li>
<a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com">A</a> 
</li>
<li>
<a href="https://twitter.com/share" rel="nofollow" class="twitter-share-button" data- url="http://www.mysite.com" data-lang="en" data-count="vertical">Tweet</a>
</li>

</ul>

我在第一个 html 锚点中添加了一个 A，然后你会看到，A 在 Tweet 上方很好地列出了。

它有帮助吗？

于 2013-01-16T18:34:49.697 回答