how to place social buttons in line?

This CSS fixed it for me. I added this to my theme’s custom CSS:

/* A common style for each individual buttons.
 * Apply styling only to the immediate divs that follow the class.
 */
.ngfb-buttons > div {
	display:inline-block;
	vertical-align:bottom;
	text-align:left;
	line-height:20px;
	width:100px;
	height:20px;
	padding:0;
	margin:2px;
}

https://grabilla.com/04417-147d2e0a-59ce-4880-afe6-a0c302baa9e9.png so this is really default design?

Make sure the “Use the Social Stylesheet” option is checked under the NGFB Style settings.

js.

https://grabilla.com/04417-7f50e75a-f9c6-41f5-89b7-d8af09c72081.png it’s checked

Do you have the URL to an example Page / Post?

There should be a block of CSS near the top, like this:

<style type="text/css">#page{overflow:visible}.ngfb-buttons{}.ngfb-buttons
img{border:none}.ngfb-buttons img:hover{border:none}.ngfb-buttons
iframe{max-width:none}.ngfb-buttons >div{display:inline-block;vertical-align:bottom;text-align:left;line-height:20px;width:100px;height:20px;padding:0;margin:2px}.ngfb-buttons div.facebook-button{width:139px}.ngfb-buttons div.gplus-button{width:99px}.ngfb-buttons div.gplusone-button{width:75px}.ngfb-buttons div.twitter-button{width:89px}.ngfb-buttons div.linkedin-button{width:110px}.ngfb-buttons div.pinterest-button{width:78px}.ngfb-buttons div.reddit-button{width:130px}.ngfb-buttons div.managewp-button{width:100px}.ngfb-buttons div.stumbleupon-button{width:84px}.ngfb-buttons div.tumblr-button{width:85px}.ngfb-buttons div.fb-share-button{width:105px}.ngfb-buttons div.fb-share-button
span{display:block !important;vertical-align:middle !important}.ngfb-content-buttons{display:block;margin:15px
auto 15px auto;text-align:center}.ngfb-excerpt-buttons{display:block;margin:10px
auto 10px auto;text-align:center}#ngfb-sidebar{cursor:pointer;text-align:center;position:fixed;z-index:99;top:100px;left:10%}#ngfb-sidebar-header{width:72px;height:72px;background-image:url(&quot;/wp-content/plugins/nextgen-facebook/images/share-icon-1.png&quot;);background-repeat:no-repeat;background-position:center}#ngfb-sidebar-buttons{width:0;height:0;overflow:hidden;border-style:none;border-radius:5px;background:none repeat scroll 0% 0% rgb(250, 250, 250);box-shadow:0px 0px 5px rgb(120, 120, 120);border-width:1px;border-color:rgb(255, 255, 255)}#ngfb-sidebar .ngfb-buttons >div{display:block;text-align:center;width:60px;height:65px;margin:10px
5px}#ngfb-sidebar .ngfb-buttons div.pinterest-button{height:28px;margin-top:42px}#ngfb-sidebar .ngfb-buttons div.tumblr-button{height:20px}#ngfb-sidebar .ngfb-buttons div.reddit-button{margin-bottom:15px}.ngfb-shortcode-buttons{display:inline-block;text-align:left}.ngfb-widget-buttons{text-align:left}.ngfb-widget-buttons .ngfb-buttons{margin:0}.ngfb-widget-buttons .ngfb-buttons >div{display:block;padding:3px;width:160px}.ngfb-admin_edit-buttons{text-align:left}.ngfb-admin_edit-buttons .ngfb-buttons{margin:0}.ngfb-admin_edit-buttons .ngfb-buttons >div{display:inline-block;vertical-align:top;padding:0;margin:5px;height:20px;width:120px}</style>

js.

https://developex.com/blog/outsourcing-to-ukraine-2012-development-rates/

Are you using the default CSS values? Your .ngfb-buttons > div display appears to be set to ‘block’ when it should be ‘inline-block’. For example:

.ngfb-buttons > div {
	display:inline-block;
	vertical-align:bottom;
	text-align:left;
	line-height:20px;
	width:100px;
	height:20px;
	padding:0;
	margin:2px;
}

You should clear the contents from all Style tabs and save the empty values – that’ll bring back the defaults.

js.

still can’t resolve this issue

code on hosting has display:inline-block;

code on styles tab has

.ngfb-buttons > div {
display:block;

and I can’t edit it.

https://grabilla.com/04618-cf603335-683f-40c6-8d42-a0f924060eed.html