-2

可能重复：
在 <div> 中格式化 <li> 元素

facebook 和 twitter 元素没有对齐。我希望它们完美地定位，一个在另一个之上。请问你能帮忙吗？

这是我的代码：

#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>
4

2 回答 2

0

试试display: inline-block;吧

于 2013-01-16T20:01:55.810 回答
0

好的，我对此做了很多假设。

假设

  1. 您正在使用垂直 Facebook 分享（已被弃用，因此我正在使用 Facebook Like 按钮进行演示）
  2. 您正在使用风格相似的 Twitter 分享，也使用垂直计数。
  3. 这应该是一个在屏幕中间弹出的模态对话框。
  4. 图片“likeusnow.jpg”只是文字“Like Us Now”

我会浮动<li>元素而不是<a>'s. 样式化<a>'s 无关紧要，因为它们的内容是<iframe>. 给你带来麻烦的是 div 的固定宽度。虽然按钮应该向左浮动，但没有足够的空间，Twitter 按钮被撞到了 Facebook 按钮的下方。

CSS：

#floating-box {
  position:absolute;
  background-color: #484848;
  margin: 54px 10px 0px 623px;
  z-index:1;
  text-align: justify;
  border: 1px solid #000;
  border-right: 1px solid #484848;
  padding: 15px;
}

.social {
  position: relative;
  list-style: none;
  margin-left: 2px;
  padding: 0;
}

.social li {
  float:left;
  margin-left: 10px;
}

我使用 jsFiddle 做了一个演示，并在此处插入了占位符 Facebook Like 和 Twitter Share 插件。

于 2013-01-16T20:47:07.293 回答