在这种情况下如何修复css填充？

Question

我正在尝试使用Font-Awesome图标来分享共享按钮。我使用填充来创建每个图标的宽度。然而，当它到达div的末尾时，它会像下面的图像一样切断。为什么我不使用share-icon图像呢？我虽然图像会减慢页面加载速度。我曾试过保证金，而不是工作。白色空间：nowrap将穿透div并给我一条线。求助。

.share_buttons{
	    margin-top: 9px;
		line-height: 4.4;
	}
	
		.share_buttons a{
			color:#fefefe;
			background:#7f98cf;
		    padding: 17px 15px 6px 15px;
		    -moz-border-radius: 50px;
		    -webkit-border-radius: 50px;
		    border-radius: 12px;
			margin-left:4px;
			margin-bottom:90px;	
			text-decoration:none;	
			text-align: center;
			cursor:pointer;	
			
		}
		.share_buttons a#facebook{
			background:#3b4ca4;
		}
		.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;
		}
		

<div class="share_buttons" id="share_buttons_about">
		
		<!-- Facebook -->
		<a id="facebook" href="" target="_blank"><i class="fa fa-facebook fa-2x">&nbspTell your friends</i></a>
		<!-- Twitter -->
		<a id="twitter" href="" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
	
		<!-- Google+ -->
		<a id="google_plus" href="" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
		<!-- tublr -->
		<a id="tumblr"  href="" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>	
	
		<!-- LinkedIn -->
		<a id="" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
		<!-- Pinterest -->
		<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>
		<!-- StumbleUpon-->
		<a id="stumbleupon" href="" target="_blank"><i class="fa fa-stumbleupon fa-2x"></i></a>
		<!-- Email -->
		<a id="envelope"  href=""><i class="fa fa-envelope-o fa-2x"></i></a>
		</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;
    }