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

Question

我正在使用 wordpress 插件列出 YouTube 频道视频。我正在使用 'university' 响应式主题并拥有 bootstrap。

youtube 缩略图水平列出。但是在整合到我的主题之后它有一些问题

请帮我解决这个问题。

Answer 1

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

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

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

Answer 2

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

请记住，<pre> 标签尊重白色 space，因此 <li> 元素之间的所有白色 space 都会显示。 whitespace 正在摆脱浮动 <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>

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

list videos in horizontal line not displaying properly

html

css

wordpress

twitter-bootstrap