圖標未在調整大小屏幕上正確對齊

我有這兩個圖標，我已放置在頁面的右下角，具有固定的位置。圖標未在調整大小屏幕上正確對齊

它在大屏幕上完美地工作，但圖標隨着屏幕大小的變化而移動。

HTML

<div class="general_social_icons"> 
    <nav class="social"> 
     <ul> 
      <li class="w3_facebook"><a href="#">Facebook </a></li> 
      <li class="w3_g_plus"><a href="#">Google+ </a></li>  
     </ul> 
    </nav> 
</div>

CSS：

.social { 
    position: fixed; 
    bottom: 0%; 
    right:0%; 
    width: 4%; 
    z-index: 9999; 
} 

.social li a{ 
    font-size:.7em; 
} 

.social ul { 
    padding: 0px; 
} 
.social ul li { 
    display: block; 
    margin: 5px; 
    width: 310px; 
    text-align: left; 
    padding: 10px; 
    -webkit-border-radius: 30px 0 30px 30px; 
    -moz-border-radius: 30px 0 30px 30px; 
    border-radius: 30px 0 30px 30px; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 

.w3_facebook{ 
    background:#3b5998; 
} 

.w3_g_plus{ 
    background:#dd4b39; 
} 

.social ul li:hover { 
    -webkit-transform: translate(-110px, 0); 
    -moz-transform: translate(-110px, 0); 
    -ms-transform: translate(-110px, 0); 
    -o-transform: translate(-110px, 0); 
    transform: translate(-130px, 0); 
} 
.social ul li a{ 
    color:#212121; 
} 
.social ul li:hover a { 
    color: #fff; 
    text-decoration: none; 
}

這裏是小提琴：https://jsfiddle.net/746d9nyc/2/

我怎樣才能確保圖標停留在相同的位置在任何屏幕尺寸，因爲他們全屏顯示。

來源

2017-01-04 Aakash Thakur

使用固定的寬度，而不是responive。嘗試改變按鈕的寬度從4％到50px，你會看到差異 – KujAslani

看起來像我們幾個得到了這個:) – disinfor

Tanxx evry11 !!! –

這是因爲你的.social容器有百分比寬度。

爲了解決這個問題之一：

•分配一個固定的寬度

.social { 

    width:27px; 

}

•設置minimum width

.social { 

    min-width:27px; 

}

來源

2017-01-04 18:56:08 Alvaro

的問題是，你有.social的width設定爲百分比。

.social { 
    position: fixed; 
    bottom: 0%; 
    right:0%; 
    width: 150px; // or some fixed value 
    z-index: 9999; 
}

更新撥弄：https://jsfiddle.net/746d9nyc/3/

來源

2017-01-04 18:57:01 disinfor

圖標未在調整大小屏幕上正確對齊

回答

相關問題