how to fix the css padding in this situation?


Tags: javascript,jquery,html,css

Problem :

I am trying to css the share button with Font-Awesome icon. I use padding to create each icon's width. However, when it reach to the end of the div, it cut off like below's image. Why don't I use share-icon image instead? I though image will slow down the page loading.I had tried margin, not working. White-space:nowrap will penetrate the div and give me one line. Help, please.

enter image description here

.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-->



Solution :

Try displaying your buttons as inline-block. Right now, they are rendered as inline, which means they do not have their own box model and can get broken up into multiple lines.

With inline-block, elements are still displayed in line, side-by-side, but they also have the box model of a block element.

.share_buttons a {
    display: inline-block;
}

    CSS Howto..

    Big Cartel - Slideshow Questions

    jQueryUI Autocomplete: how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

    How to format a long
     HTML block suitable for width limited device such as iPhone

    How to add threshhold onclick() jQuery?

    How to include css in my JSP?

    background image shows up on right-click show image, but not on webpage

    How to move div from bottom to top

    How to link my HTML file to my CSS file [closed]

    How to make device width-height based html & css via PhoneGap

    Building a DOS-feel script. How to make the command line?

    How to select col id using jquery to hide via css

    How to make the HTML colors of a Bootstrap design edge-to-edge

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to make a background color white on drop down

    how to set background image in css at MVC4

    How I can add highlight effect on outside the area of selection with CSS?

    “Dynamic” CSS id names? How to add them to the CSS file?

    How to create login popup on mouseover on a link using css & or javascript.

    How do I specify IE 11 specific css file?

    how does the jquery resultview on Airbnb Search Page work?

    How To Embed font-awesome CSS into DOM Scripting (javascript)?

    How to make a responsive text inside a bootstrap button

    How to compress the js, css files in /public in Rails production mode

    How to have text slide in when I hover over navbar?

    How to notify view from model to change a value in backbone

    How to serve css files in djangos's flatpages?

    Css tool, to calculate how many (in bytes) inline css in html

    css margin-left propery - how to specify for various browsers [closed]

    HTML with CSS: How to style font in a table?

    How to make Bootstrap sticky footer content go full page height?