3

我有一个要向用户显示的结果列表，如下所示：

胜：1 | 15 | 33 |

输：7 | 65 | 100 |

现在这些数字都在一个无序列表中，设计几乎可以正常工作。问题是这些数字中的一个可能会变成如上所示的三位数字（我希望它们上下对齐）。

所以我尝试li通过使用来调整元素的大小

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

这似乎无济于事，所以我环顾四周，发现了很多导航栏的教程。这些显示<a>标签中的调整大小，但我没有这些数字的任何链接。

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

谢谢您的帮助。

4

3 回答 3

2

用于 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;
 }
于 2012-12-05T09:57:47.107 回答
2

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

编辑：至于不一致的没有。的TD每个TR，看看这个简单的小提琴，你可以看到即使在没有的时候，桌子是多么灵活。每行的 TD 数量不同。COLSPAN此外，您可以使用HTML 属性轻松修复此类不一致。也就是说，您找出哪一行TD的 's 最多，这将是您的总列数。然后您只需计算 ((TOTAL - ACTUAL) +1)，并将此值作为最后一个 TD 传递COLSPAN。

于 2012-12-05T10:06:11.323 回答
1

你应该把它放进去display:inline-block并为它设置一个width，

这是一个活生生的例子：DEMO LINK

于 2012-12-05T10:06:11.823 回答