使用CSS调整li元素的大小

Question

我有一份结果列表需要展示给用户，它的格式如下：

胜利：1 | 15 | 33 |

失败：7 | 65 | 100 |

这些数字都在一个无序列表中，设计看起来差不多可以成功。问题是，如果其中一个数字像上面那样变成三位数（我希望它们在顶部和底部对齐），那么这个问题就很可能出现。

所以我试着通过调整 li 元素的大小来解决它。

#my_list li
{
    width: 100px; /*Exmaple width*/
}

这似乎没有起到任何作用，所以我四处寻找教程来制作导航栏。这些教程展示了在<a>标签中调整大小，但我没有任何链接与这些数字相关。

所以我的问题是，有没有一种方法可以调整li标签本身的宽度？如果没有，是否有一个HTML5标签适合包含这些数字，然后像链接的a标签一样调整该元素的大小？

感谢您的帮助。

- ragebunny

Answer 1

使用方法：用于 display:inline-block 或者 float:left

尝试以下 css：

#my_list li
{
    min-width: 100px; /*Exmaple width*/

}

或者不定义宽度

#my_list li
{
padding:0 10px;
display:inline-block;
vertical-align:top;
 }

- Rohit Azad Malik

---

太好了先生！添加display:inline-block允许我调整li元素的大小。非常感谢，我花了太多时间在这上面了。 - ragebunny

Answer 2

您所描述的情况需要使用 TABLE 而非 UL，这是一个经典案例。通过使用表格，您可以确保无论数字有多长，单元格都会自动扩展以容纳内容，从而实现完美对齐。

编辑：至于每个 TR 中 TD 的数量不一致的问题，请查看这个简单的演示，您可以看到表格是多么灵活，即使每行的 TD 数量不同也没有问题。此外，您可以使用 COLSPAN HTML 属性轻松解决这些不一致性。也就是说，您找出哪一行具有最多的 TD，并将其作为总列数。然后，您只需计算 ((TOTAL - ACTUAL) +1)，并将此值传递为最后一个 TD 的 COLSPAN。

- Matanya

---

我发现使用表格的问题在于，我在此页面上使用的值来自数据库，因此值的数量是未知的，而且表格似乎不太灵活，例如一行比另一行有更多的值。 - ragebunny

这确实有道理，我以前在这种情况下使用表格，但我发现会出现很多错误，必须一直对其进行修改，直到正确为止。而且使用列表和容器，我可以更好地控制它们的功能和位置，并且觉得这些元素的控制更容易处理......大部分时间是这样的！感谢您的帖子，我想再次研究使用表格。 - ragebunny

Answer 3

您应该将其放入display:inline-block并为其设置width，

这里是一个实时示例：DEMO LINK

- aspirinemaga