1

我的博客页面中有一组 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; }

谁能告诉我我是否在这里走错了路？据我所知，每个共享按钮都有这个公共类作为其源代码的一部分，所以这应该可以在引入所需的样式方面起到作用。任何帮助将非常感激！

4

2 回答 2

1

编辑

第二次编辑：.IN-widget是动态生成的，在标记中不存在。因此'script[type^=IN]'，作为您的选择器，请参阅下面的编辑代码

每页有一个并使用id效率低下，因此我们需要使用 JavaScript/jQuery 而不是 CSS。CSS 的一个主要限制是它无法控制选定元素的父元素和祖先元素。

细节在demo中注释

演示

/* 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=&amp;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&amp;container_width=39&amp;href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&amp;layout=button&amp;locale=en_US&amp;mobile_iframe=false&amp;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&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&amp;size=m&amp;text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&amp;time=1495223324688&amp;type=share&amp;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，并且尽可能的通用，用于演示目的。在每个页面上，在标签内包含 jQuery <script>，并将该<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 中类选择器的正确语法。）从表面上看，这就是您在浏览器中看到的元素。它的“表亲”图标是.fb，这意味着就关系而言，它们不是在浏览器中呈现时显示的兄弟姐妹。他们与兄弟姐妹不同，因此涉及位置、流程、布局等的样式不会影响表亲。表兄弟彼此隔离，因为它们嵌套在自己的父元素以及任何祖先元素中。因此，您必须找到 的祖先.linkedIn有一个兄弟姐妹是 的祖先.fb。使困惑？我也是。

解决方案

这里是奶奶：

 #block-yui_3_17_2_1_1493318168221_183886

一种迄今为止最简单、最准确的定位特定元素的方法#。idid 是选择元素的最佳方法的原因是因为id 在任何给定文档（即单个网页）上都是唯一的。

这是应该使linkedIn图标与Twitter和Facebook图标内联的规则集：

 #block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}
于 2017-05-19T19:17:38.870 回答
0

Linkedin 分享示例检查这个 jsfiddle：https ://jsfiddle.net/wrahvvr2/

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;
}

顺便提一句：

您有一个打开的脚本标签：

<script src="//platform.linkedin.com/in.js" type="text/javascript">

你应该关闭它：

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
于 2017-05-19T04:16:18.850 回答