Question

我有一个我想向用户展示的结果列表，我看起来像这样：

胜利：1 | 15 | 33 |

输了：7 | 65 | 100 |

现在这些数字都在无序列表中，设计几乎正常。问题是，如上所示，这些数字中的一个可能会变为三位数（我希望它们在顶部和底部彼此对齐）。

所以我尝试使用

调整li元素的大小

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

这似乎什么也没做，所以我环顾四周，找到了很多导航栏的教程。这些显示<a>标签中的调整大小，但我没有这些数字的任何链接。

所以我的问题是，有没有办法调整li标签本身的宽度？如果没有，那么HTML5标签在语义上适合包装这些数字，然后调整该元素的大小，就像链接的标签一样吗？

感谢您的帮助。

Answer 1

用于 display:inline-block 或 float:left

试试这个 css

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

}

或不定义width

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

Answer 2

您所描述的是一个经典案例，需要TABLE， NOT UL。通过使用表格，您可以确保完美对齐，无论有多少位数，因为单元格会自动扩展以包含内容。

编辑：至于不一致的没有。每个TD中TR的{{1}}，请看这个简单的fiddle，在那里您可以看到灵活的表格是多么灵活。 TD的每一行是不同的。此外，您可以使用COLSPAN HTML属性轻松修复此类不一致问题。也就是说，您找出哪个行最多TD，这将是您的总列数。然后你只需计算（（TOTAL - ACTUAL）+1），并将此值作为最后一个TD的COLSPAN传递。

Answer 3

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

这是一个实例：DEMO LINK

使用CSS调整li元素的大小

3 个答案: