iFrame和表格更改社交图标的样式

Question

我已在博客文章中添加了iFrame和表格，这似乎正在将我的社交图标的样式从一条水平线更改为一堆？

您可以在以下位置查看实时示例：https://www.moneynest.co.uk/testing-for-stack/

常规图标：

图标不正确：

HTML：

<h2>Which city takes the shortest time to save for a deposit?</h2>

<div>
<small><table style="text-align: center; width: 50%; float:right;" class="table-hover">
<tr><th>City</th><th>Years to save for a deposit - Single</th><th>Years to save for a deposit - Couple</th></tr>
 <tr><td>Southampton</td><td>0.72</td><td>0.29</td></tr>
 <tr><td>Belfast</td><td>0.83</td><td>0.39</td></tr>
 <tr><td>Manchester</td><td>0.93</td><td>0.38</td></tr>
 <tr><td>Derby</td><td>1.06</td><td>0.45</td></tr>
 <tr><td>Kingston upon Hull</td><td>1.07</td><td>0.45</td></tr>
 <tr><td>Sheffield</td><td>1.09</td><td>0.44</td></tr></table></small>


<iframe width="47%" height="300" src="https://datastudio.google.com/embed/reporting/1_XfUsaNLKggOW0VbHhcbbVCzfOYMPHdr/page/Fe4j" frameborder="0" style="border:0" allowfullscreen></iframe></div><div class="dummyClear"></div>

CSS：

<style>
td, th {
text-align: center;
}
th {font-weight: bold;}

.dummyClear{
   clear:both;
}

.panel-heading {
font-style: italic;
}
</style>

Answer 1

我在您的页面html代码中看到一些错误：

<style>
  td, th {
    text-align: center;
  }
  th {font-weight: bold;}</p>
    <p>.dummyClear{
    clear:both;
  }</p>
  <p>.panel-heading {Te
  font-style: italic;
  }
</style>

Answer 2

在实际示例中，.social-icons宽度设置为33.33％，只需将其更改为最多16％，图标将并排放置。

Answer 3

将所有3个图标div都添加到带有div的另一个width:100%中

这是社交图标css

.social-icons {
    padding: 8px 5px;
    text-align: center;
    width: 33.33%;
    /* display: inline-block; */
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    float: left;
}

和父div CSS

{
    width: 100%;
    overflow: hidden;
}