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

Question

我正在使用 wordpress 插件来列出 youtube channel 视频。我正在使用“大学”响应主题并进行 Bootstrap 。

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

请帮我解决这个问题。

Answer 1

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

记住 <pre>标签尊重空白，因此 <li> 之间的所有空白正在显示元素。空格会影响 float <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>