Question

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

水平列出youtube缩略图。但在融入我的主题后，它有一些问题

请帮助我解决这个问题。

Answer 1

我通过删除包含<pre>内容的<article class="single-page-content">标记取得了成功。

请记住，<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代码出现问题。

列出水平线中的视频无法正常显示

2 个答案: