0

私は次のコードを持っています：http：//jsfiddle.net/kXesZ/。2つのソーシャルメディアアイコンは背景画像の下端にある必要がありますが、インラインにできません。私はいくつかのこと（display：block-inline、float：left / rightの割り当てなど）を試しましたが、それらが行うのは動き回るだけです。

私は何を見落としていますか？

HTML

<div class="footer">
    <div class="left">
        <h3>Title</h3>
        <p>
            Lorem ipsum
        </p>
    </div>
    <div class="right">
        <h3>Title</h3>
        <p>Title</p>
        <p>
            <b>Telephone:</b> 012345678<br/>
            <b>E-mail:</b> abc@abc.com
        <p>
        <div class="social">
            <a href="http://facebook.com" title="" id="facebook">Facebook</a>
            <a href="http://twitter.com" title="" id="twitter">Twitter</a>
        </div>
    </div>

CSS

body { font:14px Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; color:#282828; text-align:left; }
.footer { background:url('http://i.imgur.com/AhHgSJr.jpg') no-repeat; padding:5px; width:984px; height:268px; }
.footer .left { display:block; width:252px; float:left; padding:98px 0 0 40px; }
.footer .right { display:block;  width:252px; float:right; padding:98px 40px 0 0; }
.footer h3 { color:#a0cf67; font-size:21px; font-weight:bold; }
.footer p { padding:0 0 26px 0; }
.footer .social #facebook { background:url('http://i.imgur.com/g20ltEP.png') no-repeat; float:left; display:block; width:59; height:55px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer .social #twitter { background:url(http://i.imgur.com/xteWM7e.png) no-repeat; display:block; width:58px; height:45px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer-container .bottom-container { text-align:center; }
4

2 に答える 2

1

あなたが見逃している/誤解している/考えすぎていると思われることがいくつかあります：

  1. 表示設定はinline-block、ではなく block-inlineです。これらのリンクの高さ/幅を制御する場合は、display設定が正しいことを確認してください。

  2. <a>タグはdisplay: inlineデフォルトで使用されます。つまり、十分なスペースがある場合は、タグが隣り合って配置されます。2つのアイテムの間隔を変更するだけでよい場合は、これで十分であり、displayプロパティはまったく必要ありません。

  3. FacebookリンクのFiddleにIDがありません。実際のマークアップにそれがあることを確認してください。これは、なぜdisplay: block; float: left;うまくいかないのかを説明することができます。

  4. CSSの.footer .social #twitter/行で船外に出ます。.footer .social #facebookIDは、CSSが取得するのとほぼ同じくらい具体的であり、有効なHTMLのページごとに1回だけ発生します。したがって、CSSに必要なのは#twitter/だけです#facebook（これで問題が解決することはないかもしれませんが、他のプロジェクトでの頭痛の種や、始めるのに良い習慣からあなたを救うことができます）。

于 2013-02-18T19:08:54.523 に答える
0

とを削除しましdisplay:blockたfloat:left。ここを表示します。フィドルは機能しているようですが、アイコンが表示されていないため（jsFiddleの問題）、ymmv。

于 2013-02-18T18:57:59.387 に答える