css - css align ul li 水平不起作用（现在它是对角线）

Question

在 Wordpress 上，我使用的是 youtube 频道列表插件。

它运作良好，但视频的对齐方式看起来不太好。实际在大视频下方显示对角线列表！

有人可以建议我如何用css解决这个问题吗？

这是页面

http://www.snowypeach.com/home/?page_id=1106

我需要视频下的列表水平对齐，而不是对角线！

Answer 1

<div />您已将 a作为 的子级嵌套<ul />。这是无效的标记。将<li/>元素移动为的子元素<ul />，删除<div />它，它将起作用

编辑

好的，我看到了问题。您将所有这些内容包装在一个<pre/>标签中。此处不应使用此标签，但如果您无法摆脱它，请添加 style white-space: normal;。

我通过在 chrome 开发工具中移动元素来测试前面的答案，这些元素删除了空格，因此也出现了问题。

希望这可以帮助 ：）

Answer 2

下面有一个类ytc-columns4<ul>控制小视频<li>标签的对齐

<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">

根据该类，下面的 css 是由第 66 行 css 文件中的插件生成的

http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1

.ytc-columns4 li {
    width: calc(100% / 4 + 10px / 3);
}

我已经更改了ytc-columns3和ytc-columns2 类，结果每次都不同。我并没有完全了解插件的计算部分在哪里。否则我可以修改代码。