如何將「社交媒體」div放在頁眉右上角？

編輯：我添加text-align: right;到social-media，但現在我在尋找這樣的：如何將「社交媒體」div放在頁眉右上角？

enter image description here

我想正上方，其中調整我的社交媒體圖標在我的頭（的右上角他們目前是）：

enter image description here

下面是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; 
}

來源

2012-01-18 novicePrgrmr

而不是浮動你的.social-media框只是對齊它的權利;

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

順便說一句，我注意到，你在你的CSS有這樣的聲明：

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

有沒有這樣的事情float:center;，我想，但沒有，所以你可以刪除那。

來源

2012-01-18 23:59:08

hahaha，我的style.css是如此的混亂。我正在學習。謝謝。這放在導航菜單上方，但我仍然不在最上面。我還可以做些什麼。？？ – novicePrgrmr 2012-01-19 00:13:00

查看我上面的編輯...... – novicePrgrmr 2012-01-19 00:17:18

@novicePrgrmr你的意思是把社交媒體圖標放在頂線之上？ – 2012-01-19 00:23:02

看看這會有所幫助。

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

來源

2012-01-18 23:43:13

嘗試將div圖標向右移動，然後利用邊距進行遊戲。

.divClass{ 
    float:right; 
}

來源

2012-01-19 01:37:52 theDazzler

如何將「社交媒體」div放在頁眉右上角？

回答

相關問題