html - CSS/HTML: これらの画像を水平方向に配置するにはどうすればよいですか?

Question

私が抱えている問題は、ソーシャル メディアの画像/リンクが縦に表示されることです。横向きに表示した方がいいと思います。

jsFiddle: http://jsfiddle.net/JordanSimps/DQmm6/

---

index.html

<div id="wrapper2">
    <div id="twitter">
            <a href="http://www.twitter.com" title="Twitter" id="twit">

            </a>
            <a href="http://www.facebook.com" title="Facebook">
                <div id="ff">
                </div>
            </a>
            <a href="http://www.youtube.com" title="YouTube">
                <div id="youtube">
                </div>
            </a>
            <a href="http://www.vimeo.com" title="Vimeo">
                <div id="vimeo">
                </div>
            </a>
            <a href="http://www.addthis.com" title="AddThis">
                <div id="addthis">
                </div>
            </a>
            <a href="http://www.dribble.com" title="Dribble">
                <div id="dribble">
                </div>
            </a>
    </div>
</div>

スタイル.css

/* Social Media Links */
    #wrapper2 {
        right: 34%;
        height: 10.850em;
        position: relative;
        float: right;
    }

    #twitter {
        position: absolute;
        list-style-type: none;
        bottom: 0;
        width: 225px;
        height: auto;
        overflow: hidden;
    }

    #twit {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/8067689795106d571328a7.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #twit:hover {
        background-position: bottom;
    }

    #ff {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/12635610355106d56e2c160.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #ff:hover {
        background-position: bottom;
    }

    #youtube {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/18402255565106d576a5d84.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #youtube:hover {
        background-position: bottom;
    }

    #vimeo {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/11318810305106d57415681.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #vimeo:hover {
        background-position: bottom;
    }

    #addthis {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/15195458355106d56859b0c.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #addthis:hover {
        background-position: bottom;
    }

    #dribble {
        height: 32px;
        width: 32px;
        background-image: url(http://a.pictureupload.us/8852823855106d56b1b08a.jpg);
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: top;
    }

    #dribble:hover {
        background-position: bottom;
    }

Answer 1

#twitter a { display:inline-block; vertical-align:text-top }

Answer 2

これをスタイルシートに追加しました。

    #twitter a{
        float: left;
    }

float:right; にすることもできます。どのように見せたいかによって異なります。

それが役立つことを願って、

Answer 3

すべてのタグで float:left を使用し、浮動要素に固定幅を指定してから、親 div twitter で overflow:hidden を使用します。

.twitter {
    overflow: hidden;
}

.twitter a {
    float: left;
    width:fixed width in px unit
}

Answer 4

私はあなたがdiv名を少し上げただけだと思います（twitterは他のすべてをラップしているようです;））が、フィドルで次のように機能します：

#twitter div {
    display:inline-block;
}