我正在将Yelp提要嵌入到我的静态站点中，希望设置宽度和高度的样式，但无法弄清楚如何定位Yelp元素

Question

我正在尝试将Yelp审查嵌入到我的静态网站中，然后设置其宽度和高度的样式，但是我无法弄清楚该怎么做。我要粘贴到HTML中的代码是一个span标记，但是在Chrome浏览器中查看该页面，我可以看到Yelp评论嵌入在iframe中。

我需要使样式影响该iframe吗？如果是这样，我该如何定位iframe？我正在为CSS使用.less。

这是嵌入式的Yelp代码：

<span class="yelp-review" data-review-id="XHRGLZHuRQWjPK90OH1XQw" data-hostname="www.yelp.com">Read 
    <a href="https://www.yelp.com/user_details?userid=G7KpLAhF-jMDN05Erympbw"
    rel="nofollow noopener">Frank L.</a>'s 
    <a href="https://www.yelp.com/biz/mcdonalds-portland-2?hrid=XHRGLZHuRQWjPK90OH1XQw"
    rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/d-AFGxgOM-fQVODjFSMxsw"
    rel="nofollow noopener">McDonald's</a> on <a href="https://www.yelp.com" 
    rel="nofollow noopener">Yelp</a> <script async="async" src="https://www.yelp.com/embed/widgets.js" type="text/javascript"> 
    </script>
</span>

这是在我的HTML中设置的方式

<main>
    <section>
        <span class="yelp-review" data-review-id="XHRGLZHuRQWjPK90OH1XQw" data- 
            hostname="www.yelp.com">Read 
            <a href="https://www.yelp.com/user_details?userid=G7KpLAhF-jMDN05Erympbw"
            rel="nofollow noopener">Frank L.</a>'s 
            <a href="https://www.yelp.com/biz/mcdonalds-portland-2?hrid=XHRGLZHuRQWjPK90OH1XQw"
            rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/d-AFGxgOM- 
            fQVODjFSMxsw"
            rel="nofollow noopener">McDonald's</a> on <a href="https://www.yelp.com" 
            rel="nofollow noopener">Yelp</a> <script async="async" 
            src="https://www.yelp.com/embed/widgets.js" type="text/javascript"> 
            </script>
        </span>
    </section>
</main

Answer 1

我最终跟随JS文件的链接，复制了代码，将其粘贴到我自己的文件中，并更改了一些我发现的宽度属性。似乎可以正常工作，但理想情况下，该选项不是我的第一选择。我仍然想听听是否有人对如何操纵嵌入式Yelp元素的width属性有更好的想法。