格式化& lt; li& gt;< div& gt;中的元素 [英] 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 Tweet按钮的顶部，要么出现在其右侧.由于某种原因，它每次都会变化.

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.

推荐答案

当我测试您的代码时此处@ 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中没有任何东西可能会影响 li 元素的任何样式.

除了您给我们的样式之外，没有其他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，然后您会看到，在Tweet上方列出了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;< div& gt;中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！