css - Wordpress 的列列表或表格替代方案

标签 css wordpress html-lists

我来找你们是因为我被难住了!我需要以不同的方式在我们的网站上设置新闻页面。目前,我制作了一个包含四列的表格,但由于我们在顶部使用当前的,在底部使用旧的,所以有时我们最终会在表格的顶部有三列(左右)。

Current table version

所以为了解决这个问题,我想我会创建一个无序列表并使用内联 css 使其成为四列。 <ul> <li style="display: block; width: 25%; float: left;"><a href="link"><img src="image"/></a> <br>Title<br>Date</li> <li style="display: block; width: 25%; float: left;"><a href="link"><img src="image"/></a> <br>Title<br>Date</li> <li style="display: block; width: 25%; float: left;"><a href="link"><img src="image"/></a> <br>Title<br>Date</li> </ul>

好吧,它并没有像我想象的那样工作,下面是发生的事情的屏幕截图:

Not working unordered list columns

有没有人对我如何让它工作有任何建议?我受限于 wordpress 的限制,而且我们的 css 文件一团糟,所以我宁愿不去处理它,而是使用内联(特别是如果我们决定再次更改它)。

感谢任何帮助和建议!!!

最佳答案

给每个 LI 一个高度应该可以解决您的问题,您也可以为每个 LI 添加边距或一些填充以将它们隔开一点。

关于css - Wordpress 的列列表或表格替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21026558/

相关文章:

jquery - 模态不适用于 Owl Carousel

wordpress - 如何覆盖 woocommerce/loop/loop-start.php

javascript - jQuery addClass 现在不工作

html - 反向排序列表的自定义编号

css - 具有背景图像的响应式 css 按钮

jquery - ipad/iphone css 转换与 jquery 不工作

javascript - Wordpress:是否可以在 block 编辑器样式表中使用 post-type 作为 CSS 选择器的一部分?

css - 将 ul 与 li 对齐成一行

javascript - 如何使用 javascript 将字符串添加到 ul 中的所有列表项?

html - Safari iOS 不尊重使用 srcset/sizes 的响应图像