如何使用CSS选择器使这两个小部件水平对齐？

Question

我在我的WordPress主题中创建了一个区域，我可以在其中包含一个小部件。好吧，我添加了一个社交关注小部件，我还包括一个Facebook关注/订阅小部件。

问题是Facebook小部件出现在社交小部件下方 - 我希望社交小部件向左刷新，而facebook小部件则向右刷新。

以下是网站上的内容：

以下是它的“一般”萤火虫：

我试过学习CSS，但我仍然对选择器和text-align：left或float：left等之间的区别感到困惑......这就是你打开那些“旁白”时的样子在萤火虫中：

我必须尝试过30种不同类型的CSS规则，我无法让Facebook Follow小部件显示在与社交小部件相同的行上，向右刷新。

我可以说，我尝试过的一件对我有用的事情就是：

#social_sprites_widget-6 .ss {
text-align: left;
}
#social_sprites_widget-6 .widgettitle {
color: white!important;
text-align: left;
}

最后，当我突出显示两个“旁白”和右键单击/复制html（而非“内部html”，类似）时，会发生以下情况：

<aside class="widget php-text catalyst-widget-area catalyst_hook_after_header" id="php- 
text-13"><div class="widget-wrap"><div class="php-textwidget"><div data-show-faces="false" 
data-colorscheme="dark" data-width="200" data-href="https://www.facebook.com/occupyhln.org" 
class="fb-follow fb_iframe_widget" fb-xfbml-state="rendered"><span style="vertical-align: 
bottom; width: 225px; height: 24px;"><iframe width="200px" scrolling="no" height="1000px" 
frameborder="0" name="f28a55d5f531d8" allowtransparency="true" title="fb:follow Facebook Social 
Plugin" style="border: medium none; visibility: visible; width: 225px; height: 24px;" 
src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F
%2Fwww.facebook.com%2Foccupyhln.org&amp;show_faces=false&amp;width=200&amp;color_scheme=dark&
amp;app_id=499338670149736&amp;locale=en_US&amp;sdk=joey&amp;channel=http%3A%2
%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D26%23cb%3Df2e90aca0c1a8de%26origin%3Dhttp%253A%252F%252Fwww.occupyhln.org%252Ff3e71b0d8eec812%26domain%3Dwww.occupyhln.org%26relation%3Dparent.parent" class=""></iframe></span></div></div></div></aside>

这已经让社交精灵和头衔向左冲。但我无法对Facebook关注小部件做任何事情。任何帮助消除这种头痛 ...它在http://www.occupyhln.org ...将不胜感激！

Answer 1

您有两个选项可以完成此任务：

选项1： CSS：

    #wrap .Social.Sprites{ width:auto; }
    #wrap .php-text.catalyst-widget-area{ float:right;width:auto; }

两者都将在同一行，但你将失去黑色背景（因为背景是社交图标小部件的一部分），你需要将这两个小部件包装在这样的div上：

<div class="mySocialMediaWidgetArea">
/* social icons widget here*/
/* follow us widget here */
</div>

并添加到CSS .mySocialMediaWidgetArea{background:#000;}

选项2： CSS

#wrap .php-text.catalyst-widget-area{
float: right;
width: auto;
margin: -80px 0 0 0;}

这里的关键是width:auto，你无法使用float或text-align将它们放在同一行，因为两个小部件都有width:100%，我使用的是类名而不是ID如果你删除并创建一个新的小部件，ID将会改变，在这种情况下你将不得不更新CSS。