css - 使用 CSS 调整 li 元素的大小

Question

我有一个要显示给用户的结果列表，我看起来像这样:

获胜:1 | 15 | 33 |

输:7 | 65 | 100 |

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

所以我尝试调整 li 的大小使用

元素

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

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

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

感谢您的帮助。

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;
 }