如何解決這種情況下的css填充？

Question

我正在嘗試使用Font-Awesome圖標來分享按鈕。我使用填充來創建每個圖標的寬度。但是，當它到達div的末尾時，它會像下面的圖像一樣切斷。爲什麼我不使用共享圖標圖像？我雖然圖像會減慢頁面加載。我曾嘗試保證金，不工作。白空間：nowrap將穿透div並給我一條線。請幫助。

.share_buttons{ 
 
\t  margin-top: 9px; 
 
\t \t line-height: 4.4; 
 
\t } 
 
\t 
 
\t \t .share_buttons a{ 
 
\t \t \t color:#fefefe; 
 
\t \t \t background:#7f98cf; 
 
\t \t  padding: 17px 15px 6px 15px; 
 
\t \t  -moz-border-radius: 50px; 
 
\t \t  -webkit-border-radius: 50px; 
 
\t \t  border-radius: 12px; 
 
\t \t \t margin-left:4px; 
 
\t \t \t margin-bottom:90px; \t 
 
\t \t \t text-decoration:none; \t 
 
\t \t \t text-align: center; 
 
\t \t \t cursor:pointer; \t 
 
\t \t \t 
 
\t \t } 
 
\t \t .share_buttons a#facebook{ 
 
\t \t \t background:#3b4ca4; 
 
\t \t } 
 
\t \t .share_buttons a#plus_share{ 
 
\t \t \t background:#5976B5; 
 
\t \t \t 
 
\t \t } 
 
\t \t .share_buttons a#twitter{ 
 
\t \t \t background:#73c6f1; 
 
\t \t } 
 
\t \t .share_buttons a#google_plus{ 
 
\t \t \t background:#cb0000; 
 
\t \t } 
 
\t \t .share_buttons a#tumblr{ 
 
\t \t \t background:#386082; 
 
\t \t } 
 
\t \t .share_buttons a#reddit{ 
 
\t \t \t background:#c1c1c1; 
 
\t \t \t color:#333; 
 
\t \t } 
 
\t \t .share_buttons a#linkedin{ 
 
\t \t \t background:#00649e; 
 
\t \t } 
 
\t \t .share_buttons a#pinterest{ 
 
\t \t \t background:#e30000; 
 
\t \t } 
 
\t \t .share_buttons a#stumbleupon{ 
 
\t \t \t background:#eb4924; 
 
\t \t } 
 
\t \t .share_buttons a#envelope{ 
 
\t \t \t background:#65c093; 
 
\t \t } 
 
\t \t

<div class="share_buttons" id="share_buttons_about"> 
 
\t \t 
 
\t \t <!-- Facebook --> 
 
\t \t <a id="facebook" href="" target="_blank"><i class="fa fa-facebook fa-2x">&nbspTell your friends</i></a> 
 
\t \t <!-- Twitter --> 
 
\t \t <a id="twitter" href="" target="_blank"><i class="fa fa-twitter fa-2x"></i></a> 
 
\t 
 
\t \t <!-- Google+ --> 
 
\t \t <a id="google_plus" href="" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a> 
 
\t \t <!-- tublr --> 
 
\t \t <a id="tumblr" href="" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a> \t 
 
\t 
 
\t \t <!-- LinkedIn --> 
 
\t \t <a id="" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a> 
 
\t \t <!-- Pinterest --> 
 
\t \t <a id="pinterest" href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><i class="fa fa-pinterest-p fa-2x"></i></a> 
 
\t \t <!-- StumbleUpon--> 
 
\t \t <a id="stumbleupon" href="" target="_blank"><i class="fa fa-stumbleupon fa-2x"></i></a> 
 
\t \t <!-- Email --> 
 
\t \t <a id="envelope" href=""><i class="fa fa-envelope-o fa-2x"></i></a> 
 
\t \t </div><!--share_buttons-->

Answer 1

儘量顯示你的按鈕作爲inline-block。現在，它們被渲染爲inline，這意味着它們沒有自己的盒子模型，可以分解成多行。

使用inline-block，元素仍然排列並排顯示，但它們也具有block元素的框模型。

.share_buttons a { 
    display: inline-block; 
} 

Answer 2

將float:left;加到.share_buttons a{} css中。

並隨時在一行固定寬度添加到div容器width:608px;到.share_buttons

這裏是小提琴：https://jsfiddle.net/b9qr9uab/1/

Answer 3

它看起來對我來說，這將是一個問題，因爲的寬度項目未設置。所以它不知道該在哪裏斷開，因爲它不知道物品的寬度。
我通過明確設置寬度來解決這個問題，然後因爲facebook更寬，我在ID選擇器中設置了寬度。不完美，但它的作品。
你也有一個大的填充下方，使它下推的項目，所以我把它下降到20px而不是90px。

.share_buttons{ 
    //margin-top: 9px; 
    //line-height: 4.4; 
    font-size: 12px; 
} 

    .share_buttons a{ 
     display: inline-block; 
     width: 32px; 
     color:#fefefe; 
     background:#7f98cf; 
     padding: 6px 15px; 
     -moz-border-radius: 50px; 
     -webkit-border-radius: 50px; 
     border-radius: 12px; 
     margin-left:4px; 
     margin-bottom:20px; 
     text-decoration:none; 
     text-align: center; 
     cursor:pointer; 

    } 
    .share_buttons a#facebook{ 
     background:#3b4ca4; 
     width: 200px; 
    } 
    .share_buttons a#plus_share{ 
     background:#5976B5; 

    } 
    .share_buttons a#twitter{ 
     background:#73c6f1; 
    } 
    .share_buttons a#google_plus{ 
     background:#cb0000; 
    } 
    .share_buttons a#tumblr{ 
     background:#386082; 
    } 
    .share_buttons a#reddit{ 
     background:#c1c1c1; 
     color:#333; 
    } 
    .share_buttons a#linkedin{ 
     background:#00649e; 
    } 
    .share_buttons a#pinterest{ 
     background:#e30000; 
    } 
    .share_buttons a#stumbleupon{ 
     background:#eb4924; 
    } 
    .share_buttons a#envelope{ 
     background:#65c093; 
    }