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>

的style.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

我认为你只需要一点div名称（twitter似乎包装了其他所有内容;））但是以下是小提琴中的作品：

#twitter div {
    display:inline-block;
}

Answer 3

我已将此添加到您的StyleSheet中。

    #twitter a{
        float: left;
    }

你也可以让它漂浮：对;取决于你想让它看起来如何。

希望有所帮助，

Answer 4

在所有标签中使用float：left并在浮动元素上给出固定宽度，然后使用overflow：隐藏在父div中。

.twitter {
    overflow: hidden;
}

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

CSS / HTML：如何使这些图像水平对齐？

4 个答案: