html - 如何制作长度统一的列表项？

Question

我正在为水平选项卡组件创建一个无序列表。我希望每个列表项都填充在图像上显示的具有统一长度和高度的三个框之一中。这是我的 jsFiddle 和 javascript。我应该对 CSS 进行哪些更改才能实现这一点？

$(function(){
    $('#tabs').tabs({
        event: "mouseover"
    });
});

https://jsfiddle.net/m1xhc4v5/6/

Answer 1

将这三个值添加到您的 CSS 中:

 #tabs li{
    display: inline-block;
    text-align: center;
    width: 30%;
}

您需要制作一个元素内联 block ，以使其接收宽度。我使用 30% 来考虑边界，您可以将其微调到您喜欢的任何值。

JSFiddle