1

我遇到的问题是我的社交媒体图像/链接是垂直显示的。我宁愿让它水平显示。

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

索引.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;
    }
4

4 回答 4

1 
#twitter a { display:inline-block; vertical-align:text-top }
于 2013-01-28T20:05:30.470 回答
0

我认为您只是对 div 名称有所了解（twitter 似乎包含了其他所有内容；））但以下内容在小提琴中起作用：

#twitter div {
    display:inline-block;
}
于 2013-01-28T20:07:44.737 回答
0

我已将此添加到您的样式表中。

    #twitter a{
        float: left;
    }

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

希望有帮助，

于 2013-01-28T20:08:38.203 回答
0

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

.twitter {
    overflow: hidden;
}

.twitter a {
    float: left;
    width:fixed width in px unit
}
于 2013-01-29T01:18:04.700 回答