我在我的博客页面中有一组LinkedIn共享按钮（通过LinkedIn提供），我试图与其他共享按钮水平对齐。到目前为止，我已经尝试了大部分内容，并且已经决定 - 无效 - 尝试使用属性选择器来使按钮按照我的意愿行事。这是按钮代码：
<script src="//platform.linkedin.com/in.js" type="text/javascript">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">
尝试过的CSS：
span[class="IN-widget"] { display: inline-block; }
有人能告诉我，如果我在这里错过了吗？据我所知，每个共享按钮都有这个公共类作为其源代码的一部分，所以这个应该在引入所需的样式时诀窍。任何帮助将不胜感激！
答案 0 :(得分：1)
第二次编辑：
.IN-widget是动态生成的，并且在标记中不存在。因此，使用'script[type^=IN]'作为您的选择器，请参阅下面的已编辑代码
每页一个并使用id效率低下，因此我们需要使用JavaScript / jQuery而不是CSS。 CSS的一个主要限制是它无法控制所选元素的父级和祖先。
详情在演示
中发表
/* The selector means:
|| Find a <script> tag that has a [type] attribute
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element
|| which has the classes .sqs-block, .code-block,
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/
$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
'display': 'inline-block',
'top': '3px'
});
$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&container_width=39&href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&layout=button&locale=en_US&mobile_iframe=false&sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
</div>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&size=m&text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&time=1495223324688&type=share&url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
</a>
</span>
</span>
</span>
<script type="IN/Share"></script>
</div>
</div>
每个共享按钮都被剥去了ID，并且它们可以用于演示目的。在每个页面上，在<script>标记内包含jQuery，并将<script>块放在结束</body>标记之前。对HTML的任何其他修改都是不必要的。更好的方法是使用外部脚本并让每个页面指向该.js文件。要保存http请求，您可以将这3行添加到现有的.js脚本中，但是您需要熟悉jQuery / JavaScript才能安全地执行此操作。
这个模板（就像这种性质的所有模板，Squarespace，Word-Press等）都是HTML的cluster-fu＃@。如果找到特定元素并且需要实际移动它，或者在布局中行为，或者遵循流程，那么您需要向上移动DOM层次结构，直到找到具有兄弟姐妹的祖先。例如：
<div class='great-great-great-aunt'> <!--Many levels of cousins--> <span class='fb'>Facebook I need to liked!</span> <!--...</div>...--> </div> <div class='great-great-grandma'> <div class='great-grandma'> <div class='grandma'> <div class='mom'> <span class='linkedIn'>Hey I'm a corporate clone! How about you?</span> </div> </div> </div> </div>
此示例中的目标元素是.linkedIn（注意.之前的className，这是CSS和jQuery中类选择器的正确语法。）表面上，这是您在浏览器中看到的元素。它的表弟＆＃34;表兄弟＆＃34; icon是.fb，这意味着就关系而言，它们不是兄弟姐妹，因为它在浏览器中呈现时就是如此。他们不和兄弟姐妹共享同样的父母，所以涉及位置，流量，布局等的风格不会影响堂兄。堂兄弟彼此隔离，因为它们嵌套在它们自己的父元素以及任何祖先元素中。因此，您必须找到.linkedIn的祖先，该祖先的兄弟是.fb的祖先。困惑？我也是。
这是奶奶：
#block-yui_3_17_2_1_1493318168221_183886
#表示id，这是查找特定元素的最简单，最准确的方法。 id是选择元素的最佳方法，因为 id在任何给定文档上都是唯一的（即单个网页）。
这是应该将linkIn图标与Twitter和Facebook图标内联的规则集：
#block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}
答案 1 :(得分：0)
JS：
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
CSS（这应该以分享按钮为目标）：
span[class="IN-widget"] {
display: inline-block;
background: red;
}
BTW：
你有一个开放的脚本tage：
<script src="//platform.linkedin.com/in.js" type="text/javascript">
你应该关闭它：
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>