-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 のようなボタンでデモを行っています)。
  2. 同様のスタイルの Twitter 共有を使用しており、垂直カウントも使用しています。
  3. これは、画面の中央にポップアップするモーダル ダイアログです。
  4. 画像「likeusnow.jpg」は「Like Us Now」というテキストです

<li>ではなく要素をフロートします<a>。の内容<a>は<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 に答える