Question

我很难过，希望得到一些帮助。

我想将Pin It Button与一些文本对齐，两者之间有足够的空间，所以看起来不错。然后我想在按钮和文本周围有水平和垂直线条。

在上一个问题中，有人帮助我使用了fiddle中的代码..但是当我将其转移到my website时，它无效

非常感谢，艾利森

代码：

<div class="recipesharing">
<div>

<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" /></a><p.id>Pin For Later</p.id>
</div>
</div>

CSS

div.recipesharing {
    border-bottom: 2px solid rgb(247, 247, 247);
   border-top: 2px solid rgb(247, 247, 247);
   width: 600px;
   height: 60px;
}

div.pintherecipe {
  display: inline-block;
}

p.id {
    display: inline;
    padding-right: 100px;
    line-height:150px;
}

img {vertical-align: middle;margin-right:5px;}

Answer 1

这与jQuery无关。

无论如何，JSFiddle上的代码与网站上的代码不同。

的jsfiddle：

<div class="recipesharing">
  <div>
  <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" />
  </a>
  <p.id>Pin For Later</p.id>
  </div>
</div>

网站：

<div class="recipesharing">
  <div>
    <p>
      <span class="PIN_1467591127309_button_pin PIN_1467591127309_round PIN_1467591127309_tall" data-pin-log="button_pinit_bookmarklet" data-pin-href="https://www.pinterest.com/pin/create/button/"></span>
      Pin For Later
    </p>
  </div>
</div>

但是，这不是全部。这是无效的：

<p.id>Pin For Later</p.id>

我确定你的意思是（根据你的CSS代码判断）：

<p class="id">Pin For Later</p>

另外，我删除了“line-height：150px”，因为它与设计相混淆。

这就是我将网站上的代码更改为JSFiddle（修正后的代码）的代码：[screenshot link]。它与JSFiddle中的示例之间的唯一区别似乎是字体，这很容易修复（如果你甚至想在网站上使用无衬线字体）。

将按钮与文本对齐（垂直和水平）

1 个答案: