格式化< li>元素在< div> [英] Formatting an <li> element within a <div>

问题描述

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

I have two li elements on my page and I want them to display one above the other, but they don't. Here is my code:

#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是：

The HTML that uses this CSS is:

<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喜欢按钮显示在Twitter微博按钮的顶部，或者在它的右边。

The Facebook like button either appears on top of the twitter tweet button, or to the right of it. For some reason it varies every time.

推荐答案

当我测试你的代码 here @ csstest.com 这两个 li 很好地显示在一个上面，就像简单 li

When I test your code here @ csstest.com the two li are well displayed one above the other, just like plain li elements.

并且我在您的CSS中没有看到任何可能影响 <$

有没有其他的CSS样式比你给我们？

Are there no other css style than the ones you gave us ?

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

What browser are you using for testing ?

Edit1：

如果你这样做：

#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，然后你会看到，

I have added a A in the first html anchor, and then you'll see, A is well listed above Tweet.

是否有帮助？

这篇关于格式化&lt; li&gt;元素在&lt; div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！