以水平线列出视频未正确显示

Question

我正在使用 wordpress 插件来列出 youtube 频道视频。我正在使用“大学”响应式主题并具有引导程序。

YouTube 缩略图水平列出。但是在集成到我的主题之后它遇到了一些问题

请帮我解决这个问题。

Answer 1

我成功删除了包装<article class="single-page-content"> 内容的<pre> 标签。

请记住，<pre> 标签尊重空白，因此<li> 元素之间的所有空白都会被显示。空格会影响浮动<li> 元素的对齐方式。

这是一个演示：

.group:before,.group:after {content: "";display: table;}
.group:after {clear: both;}
.group {zoom: 1;}
div {
  background-color: #CCC;
  margin: 0 0 2em 0;
  padding: 1em;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  float: left;
  margin: 0 1em 0 0;
}

<div class="group">
  <p>With &lt;pre&gt;</p>
  <pre>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </pre>
</div>

<div class="group">
  <p>Without &lt;pre&gt;</p>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

<div class="group">
  <p>With &lt;pre&gt; but no whitespace</p>
  <pre><ul><li>item</li><li>item</li><li>item</li><li>item</li></ul></pre>
</div>

Answer 2

查看您的代码，我发现添加它可以解决布局问题并且图像排列正确。

ul.ytchagallery .ytc-row {
     display: inline-block
}

话虽如此，我不建议使用该插件，他们似乎使用了很多代码，这会使您的网站膨胀并使其更难调试。他们还使用!important 标签，这可能会导致您网站中的其他 CSS 代码出现问题。