如何将“社交媒体”div放在标题的右上角？

Question

编辑：我已将text-align: right;添加到social-media，但现在我看起来像这样：

我正在尝试调整标题右上角的社交媒体图标（正上方位置）：

这是html：

<header id="branding" role="banner">
            <div class="header_nav">
            <div class="head-logo">
                    <h1 id="site-title"><a href="/"><img class="title-image" title="Boli Stylus" src="http://www.bolistylus.com/wp-content/uploads/BoliNewLogo_Diff.png" alt="stylus for iPad"/></a></h1>
                    <!--<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>--> 
            </div>

            <div class="social-media">
            <ul class="sm-icons">
                <li class="social"><a href="http://www.facebook.com/"><img class="sm-img" src="http://www.bolistylus.com/wp-content/uploads/facebook.png" alt="facebook"></a></li>

                <li class="social"><a href="http://www.twitter.com/"><img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/twitter.png" alt="twitter"></a></li>

                <li class="social"><a href="http://www.vimeo.com/"><img class="sm-img"src="http://www.bolistylus.com/wp-content/uploads/vimeo.png" alt="vimeo"></a></li>

            </ul>   
            </div>

            <div class="head-nav">
            <ul>

                            <li><a href="/shop">SHOP</a></li>      

                            <!--<li><a href="/products/cosmonaut">BOLI+</a></li>-->

                            <li><a href="/about-us">ABOUT US</a></li>

                            <li><a href="/faq">FAQ</a></li>

                            <!--<li><a href="/pages/press">PRESS</a></li>-->    

                            <li><a href="/cart">YOUR CART</a></li>
                </ul>
            </div>  
            <br style="clear: both;"/>
</div>

    </header><!-- #branding -->

这是css：

a { 
    color: #254655; 
}

ul, ol {
    margin: 0 0 0 5.5em;
}

#page {
    margin: 0 auto;
}

body{
background: #f3f3f3;
border-top: none;
border-top: 10px solid #666666;
}

#page {
    margin: 0em auto;
    width: 1000px;
}

.singular.page .hentry {
    padding: 0.5em 0 0;
}

#branding{
background: #f3f3f3;
color: #000000;
border-top: none;
position: relative;
z-index: 2;
}

#site-title {
    /*margin-right: 270px;*/
    padding: 0.66em 0 0 0;
}

#site-title a {
    color: #111111;
    font-size: 60px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}

#branding h1, header#branding a{  
text-align: left;
margin-right: 0;
}

#branding span{
text-align: center;
}

#branding img {
    height: auto;
    margin-bottom: -.66em;
    width: auto;
}

#branding .title-image {
    width: 30%;
}

#branding .social-media {
    float: right;
}

#branding .widget{
position: absolute;
top: 2em;
right: 7.6%;
}

#respond{ background: #E7DFD6; }                     

.welcome{
margin: 15px 60px;
background: #f3f3f3;
border: 1px solid #f6ff96;
padding: 15px;
text-align: center;
}

/* =Menu
-------------------------------------------------------------- */
/*.header_nav ul{
    margin: 0; 
    padding: 0;
    text-align: center;
    width: 400px;
    }
*/

#branding img .sm-img {
    height: auto;
    margin-bottom: -.66em;
    width: 100%;
}

.header_nav {
    background: #f3f3f3
    }


.header_nav .head-nav { 
    border-bottom: 1px solid #cfcec9;
    border-top: 1px solid #cfcec9;
    margin-top: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right
    }

.header_nav ul li{
    display: inline;
    }

.header_nav ul li a{ 
    padding: 10.5px 21px;
    color: #000000;
    }

.header_nav ul li a:hover, .menu ul li .current{
    color: #a8cb17;
    text-decoration: none;
    }



#access {
    background: #f3f3f3; /* Show a solid color for older browsers */
}
#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
#access li {
    float: center;
    position: relative;
    display: inline;
}
#access a {

}
#access ul ul {

}
#access ul ul ul {

}
#access ul ul a {

}
#access a:focus {
}
#access li:hover > a,
#access a:focus {
}   
#access ul li:hover > ul {
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
    font-weight: bold;
}

Answer 1

不要将.social-media框浮动，只需将其对齐;

#branding .social-media {
    text-align: right;
    float:right; //remove
}

顺便说一句，我注意到你在CSS中有这个声明：

#access li {
    float: center; //??
    position: relative;
    display: inline;
}

我希望没有float:center;这样的东西，但是没有，所以你可以删除它。

Answer 2

看看这是否有帮助。

.social-media {
    position:relative;
    top:-12px; /* <-- Play with this. */
}

Answer 3

尝试将带有图标的div浮动到右边，然后使用边距进行游戏。

.divClass{
    float:right;
}