Wordpress頂部面板上的浮動社交圖標

Question

我正試圖浮動兩個CSS社交圖標Facebook和LinkedIn頂部面板上的WordPress網站的權利，同時使圖標響應。我將兩個圖標放入一個容器中，但它似乎無法控制圖標甚至工作。

您可以在該網站右上角的圖標上找到該網站的一半，顯示半頁隱藏在頁面頂部藍線的菜單欄後面。

http://www.rodgersgroupllc.com/newsite/

下面是HTML：

/* Social Icons */ 
 
#socialiconwrapper{ 
 
    width:100px; 
 
    height:100px; 
 
    float:right; 
 
} 
 
.social{ 
 
    float:right; 
 
} 
 

 
html { 
 
    font-size: 10px; 
 
} 
 
body { 
 
    text-align: right; 
 
} 
 
/* Wrapper */ 
 
.icon-button { 
 
    background-color: white; 
 
    border-radius: 7.6rem; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 2.0rem; 
 
    height: 3.6rem; 
 
    line-height: 3.6rem; 
 
    margin: 0 5px; 
 
    position: relative; 
 
    text-align: center; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 3.6rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 30px; 
 
} 
 
/* Circle */ 
 
.icon-button div { 
 
    border-radius: 0; 
 
    display: block; 
 
    height: 0; 
 
    left: 50%; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 0; 
 

 
} 
 
.icon-button:hover div { 
 
    width: 3.6rem; 
 
    height: 3.6rem; 
 
    border-radius: 3.6rem; 
 
    margin: -1.8rem; 
 
} 
 
.twitter div { 
 
    background-color: #4099ff; 
 
} 
 
.facebook div { 
 
    background-color: #3B5998; 
 
} 
 
/* Icons */ 
 
.icon-button i { 
 
    background: none; 
 
    color: white; 
 
    height: 3.6rem; 
 
    left: 0; 
 
    line-height: 3.6rem; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 3.6rem; 
 
    z-index: 10; 
 
} 
 
.icon-button .icon-twitter { 
 
    color: #4099ff; 
 
} 
 
.icon-button .icon-facebook { 
 
    color: #3B5998; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
} 
 
.icon-button:hover .icon-twitter, 
 
.icon-button:hover .icon-facebook,

<div id='socialiconwrapper'> 
 
    <div class ='social'> 
 
     <a href="https://twitter.com/minimalmonkey" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a> 
 
    </div> 
 

 
    <div class ='social'> 
 
     <a href="https://facebook.com" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a> 
 
    </div> 
 
</div>

有人能告訴我，爲什麼這兩個圖標都在彼此的頂部，爲什麼這ISN」請問工作？

Answer 1

這是因爲對.icon-button i

絕對藥水試試這個

#socialiconwrapper { 
    float: right; 
    height: auto; 
    margin: 1px 0 0; 
    width: auto; 
} 
#socialiconwrapper .social { 
    float: right; 
    margin-left: 12px; 
    text-align: center; 
} 
#socialiconwrapper .invert a { 
    background-color: #fff; 
    color: #f3ad45; 
    float: left; 
    height: 30px; 
    text-align: center; 
    width: 30px; 
} 
#socialiconwrapper i { 
    display: inline-block; 
    float: none; 
    font-size: 18px; 
    height: auto; 
    padding: 0; 
    position: relative; 
    top: -2px; 
    width: auto; 
} 

Answer 2

試試這個，從#socialiconwrapper取出填充和邊距。

#socialiconwrapper { 
    width: 100px; 
    height: 100px; 
    padding: 0px; 
    z-index: 999; 
    margin-top: 0px; 
} 

.social { 
    float: right; 
    height: 36px; 
    width: 36px; 
}